Pelengkapan otomatis menerapkan nilai bukan label ke kotak teks

Saya mengalami masalah saat mencoba membuat pelengkapan otomatis berfungsi dengan benar.

Semuanya terlihat baik-baik saja bagi saya tapi ....

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

Namun ketika saya memilih item dari dropdown nilainya diterapkan ke kotak teks dan bukan label.

Apa yang telah saya lakukan salah?

Jika saya melihat sumbernya menggunakan firebug, saya dapat melihat bahwa bidang tersembunyi saya sedang diperbarui dengan benar.

Perilaku default selectacara ini adalah memperbarui inputdengan ui.item.value. Kode ini dijalankan setelah event handler Anda.

Cukup kembali falseatau hubungi event.preventDefault()untuk mencegah hal ini terjadi. Saya juga akan merekomendasikan melakukan sesuatu yang serupa untuk focusacara tersebut untuk mencegah ui.item.valueditempatkan di inputsaat pengguna mengarahkan kursor ke pilihan:

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

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

Hanya ingin menambahkan bahwa alih-alih mereferensikan elemen masukan dengan "id" di dalam fungsi select dan focus callback, Anda dapat menggunakan selektor ini , seperti:

$(this).val(ui.item.label);

berguna saat Anda menetapkan pelengkapan otomatis untuk beberapa elemen, yaitu menurut kelas:

$(".className").autocomplete({
...
    focus: function(event, ui) {
        event.preventDefault();
        $(this).val(ui.item.label);
    }
});

Dalam kasus saya, saya perlu merekam 'id' bidang lain dalam input tersembunyi. Jadi saya menambahkan bidang lain dalam data yang dikembalikan dari panggilan ajax.

{label:"Name", value:"Value", id:"1"}

Dan telah menambahkan tautan 'buat baru' di bagian bawah daftar. Saat mengklik 'buat baru', modal akan muncul dan Anda dapat membuat item baru dari sana.

$('#vendorName').autocomplete
    (
        {
            source: "/Vendors/Search",
            minLength: 2,
            response: function (event, ui)
            {
                ui.content.push
                ({
                    label: 'Add a new Name',
                    value: 'Add a new Name'
                });
            },
            select: function (event, ui)
            {
                $('#vendorId').val(ui.item.id);
            },
            open: function (event, ui)
            {
                var createNewVendor = function () {
                    alert("Create new");
                }
                $(".ui-autocomplete").find("a").last().attr('data-toggle', 'modal').addClass('highLight');
                $(".ui-autocomplete").find("a").last().attr('href', '#modal-form').addClass('highLight');
            }
        }
    );

Saya pikir intinya adalah Anda dapat menambahkan bidang data tambahan selain hanya 'label' dan 'nilai'.

Saya menggunakan modal bootstrap dan bisa seperti di bawah ini:

<div id="modal-form" class="modal fade" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <div class="row">

            </div>
        </div>
    </div>
</div>