JQuery UI 自动完成 - 如何选择一个项目并在输入文本中保留标签（不是值）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9771798/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery UI Autocomplete - How to select an item and mantain the label (not the value) in the input text
提问by outlookrperson
I′m trying to use the JQuery UI Autocomplete plugin (click to see the demo page of JQuery UI Autocomplete plugin)
我正在尝试使用 JQuery UI 自动完成插件（点击查看 JQuery UI 自动完成插件的演示页面）
I′m using as datasource a list of objects as bellow:
我正在使用一个对象列表作为数据源，如下所示：
var availableTags = [
{label: "Sao Paulo", value: "SP"},
{label: "Sorocaba", value: "SO"},
{label: "Paulinia", value: "PA"},
{label: "S?o Roque", value: "SR"}
];
The problem is that when I select an item, the value of the datasource is set to the input field and not the label. I′ve created a handle to the select to save the item value in a hidden field and set the label to the input field, but this event is fired too soon by the plugin and the value is re-set to the input field.
问题是当我选择一个项目时，数据源的值被设置为输入字段而不是标签。我已经为选择创建了一个句柄，以将项目值保存在隐藏字段中，并将标签设置为输入字段，但是插件过早触发了此事件，并且该值被重新设置为输入字段。
HTML:
HTML：
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="JQuery.UI/1.8.14/themes/base/jquery.ui.base.css" />
<link rel="stylesheet" type="text/css" href="JQuery.UI/1.8.14/themes/base/jquery.ui.theme.css" />
<style>
.ui-menu-item
{
font-size: 12px;
}
</style>
<script src="JQuery/1.6.2/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="JQuery.UI/1.8.14/js/jquery-ui-1.8.14.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var availableTags = [
{label: "Sao Paulo", value: "SP"},
{label: "Sorocaba", value: "SO"},
{label: "Paulinia", value: "PA"},
{label: "S?o Roque", value: "SR"}
];
$("#txtCidade").autocomplete({ minLength: 0,
source: availableTags);
});
function OnSelect(event, ui)
{
var item = ui.item;
var itemLabel = item.label;
var itemValue = item.value;
$("#hidCidade").val(itemValue);
$("#txtCidade").val(itemLabel);
}
</script>
</head>
<body>
<form>
<input id="hidCidade" type="hidden" />
<input id="txtCidade" type="input" class="ui-autocomplete-input" />
</form>
</body>
</html>
Please, could someone help me with this?
拜托，有人可以帮我吗？
Thanks!
谢谢！
采纳答案by outlookrperson
I′ve solved the issue creating the handlers for OnFocus and OnSelect and returning false in each one.
我已经解决了为 OnFocus 和 OnSelect 创建处理程序并在每个处理程序中返回 false 的问题。
function OnFocus(event, ui)
{
$( "#txtCidade" ).val( ui.item.label );
return false;
}
function OnSelect(event, ui)
{
var item = ui.item;
var itemLabel = item.label;
var itemValue = item.value;
var campo = $("#txtCidade");
$("#hidCidade").val(itemValue);
$("#txtCidade").val(itemLabel);
var campoValue = campo.val();
var hidCampoValue = $("hidCidade").val();
return false;
}
回答by snorris
Since I just had to solve this too. I thought I would show my solution. IMHO it is cleaner since you don't need the separate OnSelect and OnFocus functions. (though it really does the same thing as what rperson ended up doing)
因为我也不得不解决这个问题。我想我会展示我的解决方案。恕我直言，它更干净，因为您不需要单独的 OnSelect 和 OnFocus 功能。（尽管它确实与 rperson 最终做的事情相同）
$('#txtCidade').autocomplete({
source: availableTags,
focus: function(event, ui) {
$(this).val(ui.item.label);
return false;
},
select: function(event, ui) {
$('#hidCidade').val(ui.item.value);
$(this).val(ui.item.label);
return false;
}
});?
回答by j08691
Change your autocomplete call to the following:
将您的自动完成调用更改为以下内容：
$("#txtCidade").autocomplete({
source: availableTags,
select: function(event, ui) {
$("#hidCidade").val(ui.item.label);
}
});?
#txtCidadeshould automatically pckup the selected label when an autocomplete item is clicked on.
#txtCidade单击自动完成项目时，应自动打包所选标签。
See a jsFiddle examplehere.
在此处查看jsFiddle 示例。
