[解決済み] オートコンプリートでテキストボックスにラベルではなく値を適用する

質問

オートコンプリートが正しく動作しないので困っています。

すべてうまくいっているように見えますが......。

<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")

しかし、ドロップダウンから項目を選択すると、値がラベルの代わりにテキストボックスに適用されます。

何がいけなかったのでしょうか？

firebugでソースを見ると、hiddenフィールドが正しく更新されていることがわかります。

どのように解決するのですか？

のデフォルトの動作は select イベントの更新は input で ui.item.value . このコードでは の後に の後に実行されます。

単純に false を呼び出すか event.preventDefault() を実行することで、この現象が発生しないようにします。また、同じようなことを focus イベントでも同様のことを行って ui.item.value に配置されるのを防ぎます。 input に配置されます。

$("#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);
    }
});

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