jQuery UI自动完成的一个潜在的简单问题是让我失望。我的来源是
var ac = [
{
label: "One Thing",value: "One-Thing"
},{
label: "Two Thing",value: "Two-Thing"
},]
我正在调用该小部件
$(function() {
$( "#search" ).autocomplete({
source: PK.getAutocompleteSource(),focus: function( event,ui ) {
$("#search").val(ui.item.label);
return false;
},select: function( event,ui ) {
$("#search").val(ui.item.label);
PK.render(ui.item.value);
}
});
});
一切工作正常当我输入#search输入字段时,匹配的标签显示在下拉列表中,当我选择正确的搜索时。当我使用箭头键(或鼠标)在下拉列表中选择不同的项目时,小部件甚至会显示#search输入字段中的标签。除了,当我按下Enter键时,小部件使用值而不是标签填充#search输入字段。所以这个领域显示一次,而不是一个事情。
我如何纠正这个?当然我期待的是更合理的行为,不是吗?
解决方法
如果你想要的标签是你的价值,只要有来源
var ac = ["One Thing","Two Thing"]
或者,自动完成默认操作的选择方法是将值对象(如果指定)作为输入的值。您也可以将event.preventDefault()放在select函数中,并将标签作为值(如您所愿)
select: function( event,ui ) {
event.preventDefault();
$("#search").val(ui.item.label);
PK.render(ui.item.value);
}