jQuery UI 自动完成显示错误值

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

当您选择一个名称时，它会正确地将其添加到输入中，但我试图消除当您在选项中使用箭头时显示的数值。

我没有在自动完成文档中看到任何事件来完成此任务。

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

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 演示