jQuery UI 自动完成在输入字段中显示值而不是标签答案

【问题标题】：jQuery UI autocomplete shows value instead of label in the input fieldjQuery UI 自动完成在输入字段中显示值而不是标签
【发布时间】：2013-06-29 01:08:43
【问题描述】：

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 输入字段中输入时，匹配的标签会显示在下拉列表中，当我select 时执行正确的搜索。当我使用箭头键（或鼠标）在下拉列表中选择不同的项目时，小部件甚至在#search 输入字段中显示label。除了，我一按回车，小部件就会用value 而不是label 填充#search 输入字段。因此该字段显示 One-Thing 而不是 One-Thing。

我该如何纠正这个问题？当然，我期待的是更合理的行为，不是吗？

【问题讨论】：

标签： jquery-ui-autocomplete

【解决方案1】：

如果您希望标签成为您的价值，只需将来源设为

var ac = ["One Thing", "Two Thing"]

或者，自动完成默认操作的select 方法是将value 对象（如果指定）作为输入的值。您也可以将event.preventDefault() 放入 select 函数中，它会将标签作为值（如您所愿）

select: function( event, ui ) {
        event.preventDefault();
        $("#search").val(ui.item.label);
        PK.render(ui.item.value);
    }

【讨论】：

谢谢，event.preventDefault(); 成功了。说真的，这应该在文档中。
@dpp focus 回调（在原始问题中）返回 false，这是使用 value 而不是 label 的箭头键时跳过默认行为的另一种方式.一旦从列表中选择了一个项目，无论如何，它都会调用select 回调，并且您希望使用preventDefault() 或return false 跳过默认行为
遇到了同样的问题，它显示的是值而不是标签。 preventDefault() 工作！！！

【解决方案2】：

如果您希望您的标签成为 onFocus 和 onSelect 文本框中的值，请使用以下代码：

select: function(event, ui) { 
        $('#hiddenid').val(ui.item.value); 
        event.preventDefault(); 
        $("#search").val(ui.item.label); },

focus: function(event, ui) { 
       event.preventDefault(); 
       $("#search").val(ui.item.label);}

我错过了 onFocus 事件（仅设置 onSelect 事件）。因此，该值继续显示在文本输入中。

【讨论】：

这对我不起作用，因为我也在使用autofocus:true。问题是每次击键都会触发focus 事件，并且每次击键都会中止用户的输入并替换为当前突出显示的项目$("#search").val(ui.item.label);。

【解决方案3】：

我仍然遇到箭头键显示值的问题。所以我实际上发现最好将值和标签都分配给标签，然后将值放在数据的第三个属性上。例如让我们把它放在 id 上。

var ac = [
    {
        label: "One Thing",
        value: "One Thing",
        id: "One-Thing",
    },
    {
        label: "Two Thing",
        value: "Two Thing",
        id: "Two-Thing"
    },      
]

那么当你使用select事件的时候，就可以从ui中获取id：

select: function( event, ui ) {
    PK.render(ui.item.id);
}

【讨论】：