JQuery UI自动完成 – 如何选择项目并保留输入文本中的标签（而不是值）
我正在尝试使用JQuery UI Autocomplete插件（ 点击查看JQuery UI Autocomplete插件的演示页面 ）
我用作数据源的对象列表如下：
var availableTags = [ {label: "Sao Paulo", value: "SP"}, {label: "Sorocaba", value: "SO"}, {label: "Paulinia", value: "PA"}, {label: "São Roque", value: "SR"} ]; 问题是当我选择一个项目时，数据源的值被设置为输入字段而不是标签。 我创建了一个select选项，用于将项值保存在隐藏字段中，并将标签设置为输入字段，但插件过早触发此事件，并将值重新设置为输入字段。
HTML：
.ui-menu-item { font-size: 12px; } $(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); }
拜托，有人可以帮我吗？
谢谢！
因为我也必须解决这个问题。 我以为我会展示我的解决方案。 恕我直言，它更清洁，因为你不需要单独的OnSelect和OnFocusfunction。 （尽管它确实和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; } });
将自动填充调用更改为以下内容：
$("#txtCidade").autocomplete({ source: availableTags, select: function(event, ui) { $("#hidCidade").val(ui.item.label); } });
#txtCidade自动完成项时， #txtCidade应自动pckup所选标签。
请参阅此处的jsFiddle示例 。
我解决了为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; }