Jquery 自动完成将值而不是标签应用于文本框

发布于10月04日

我在try 让自动完成功能正常工作时遇到了麻烦.

在我看来一切都没问题，但是……

<script>
$(function () {
    $("#customer-search").autocomplete({
        source: 'Customer/GetCustomerByName',
        minLength: 3,
        select: function (event, ui) {
            $("#customer-search").val(ui.item.label);
            $("#selected-customer").val(ui.item.label);
        }
    });
});
</script>
<div>
<input id="customer-search" />
 </div>
@Html.Hidden("selected-customer")

However when I select an item from the dropdown the value is been applied to the textbox instead of the label.

What have I done wrong?

If I look at the source using firebug I can see that my hidden field is being updated correctly.

推荐答案

select事件的默认行为是将input更新为ui.item.value.这段代码运行after个事件处理程序.

Simply return false or call event.preventDefault() to prevent this from occurring. I would also recommend doing something similar for the focus event to prevent ui.item.value from being placed in the input as the user hovers over choices:

$("#customer-search").autocomplete({
    /* snip */
    select: function(event, ui) {
        event.preventDefault();
        $("#customer-search").val(ui.item.label);
        $("#selected-customer").val(ui.item.label);
    },
    focus: function(event, ui) {
        event.preventDefault();
        $("#customer-search").val(ui.item.label);
    }
});

Example: http://jsfiddle.net/andrewwhitaker/LCv8L/