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

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

我在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