Question

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

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

Answer 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);
    }

Answer 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事件）。因此，该值继续显示在文本输入中。

Answer 3

我仍然遇到显示值的箭头键问题。所以我实际上发现最好将值和标签分配给标签，然后将值放在数据的第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);
}

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

3 个答案: