Question

jsFiddle用于交互式示例

我有一个类似于示例的自动完成框。如果您开始输入名称，以M开头，它会显示一个下拉列表。如果向下箭头指向名称（而不是用鼠标选择一个），您会注意到，输入框中的值将填充值而不是人名。

HTML：

<input type="text" id="myInput" placeholder="Type M...">
<input type="hidden" id="myHidden">

脚本：

$("#myInput").autocomplete({
    delay: 500,

    minLength: 1,

    select: function(e, ui) {
        $(this).val(ui.item.label);
        $("#myHidden").val(ui.item.value);
        return false;
    },

    source: [{"label":"Marie","value":1},
             {"label":"Michelle","value":2},
             {"label":"Mia","value":3},
             {"label":"Melissa","value":4},
             // ...etc
    ];
});

当你选择一个名字时，它会正确地将它添加到输入中，但是我试图摆脱在你选择箭头时显示的数值。

我没有看到auto-complete docs中有任何事件可以实现此目的。

我可能错过了它，或者是否有一种方法可以重构我的源数据以防止这种情况发生？

Answer 1

解决方案：

$("#myInput").autocomplete({
    delay: 500,
    minLength: 1,
    select: function(event, ui) {
        event.preventDefault();
        $(this).val(ui.item.label);
        $("#myHidden").val(ui.item.value);
        return false;
    },
    focus: function(event, ui) {
        event.preventDefault();
        $(this).val(ui.item.label);
    },
    source: [{"label":"Marie","value":1},
             {"label":"Michelle","value":2},
             //...
             {"label":"Maureen","value":40}]
});

JSFiddle demo

jQuery UI自动完成显示错误的值

1 个答案: