我需要为选择返回一个数字ID,但在单词中显示客户名称。我有一个隐藏字段用于客户ID和显示名称的文本输入。它有点工作,但我更愿意改善用户体验。
根据文档,ajax请求返回变量数据中的客户列表,该变量数据用于构建对象数组:
values = [];
$.each(data, function(index, guest) {
values.push({label: guest, value: index});
});
然后我将自动完成绑定到表单字段:
$( "#customer" + numRand ).autocomplete({
source: values,
minLength: 2,
select: function (event, ui) { // set hidden field with index of selection
$( "#customerId" + numRand ).val(ui.item['value']);
},
change: function (event, ui) { // restore word label to input field
$( "#customer" + numRand ).val(ui.item['label']);
}
});
numRand用于创建半唯一标识符,因为在此应用程序中,表单是在JQuery ui对话框中加载的,否则会在实例之间保留值。
我尝试过使用更改事件而不是关闭,但结果是一样的。 *当至少有两个字母时键入到表单字段,菜单正确显示,显示名称。选择名称后,数字索引将进入表单字段。当焦点移动到页面的任何其他部分时(单击背景工作),数字索引将根据需要由客户名称替换。我希望最初显示名称。
有关如何在select上显示名称的任何建议吗? (我已经尝试将它放在那个处理程序中但是当焦点移动时它会立即被id覆盖)。
提前感谢任何建议。
*编辑 - 我错了, close 事件,如 select 事件,被内置方法覆盖。
更新:解决方案很简单:使用 select 事件并通过返回false覆盖内置方法:
$( "#customer" + numRand ).autocomplete({
source: values,
minLength: 2,
select: function (event, ui) {
$( "#customerId" + numRand ).val(ui.item['value']);
$( "#customer" + numRand ).val(ui.item['label']);
return false;
}
});
答案 0 :(得分:0)
解决方案很简单:使用select事件并通过返回false来覆盖内置方法:
$( "#customer" + numRand ).autocomplete({
source: values,
minLength: 2,
select: function (event, ui) {
$( "#customerId" + numRand ).val(ui.item.value);
$( "#customer" + numRand ).val(ui.item.label);
return false;
}
});