Pelengkapan otomatis menerapkan nilai bukan label ke kotak teks

86

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.

Penyelam Dan
sumber
1
Apa yang Anda lihat dalam respons JSON di Firebug?
SLaks
[{"label": "Tom Smith", "value": "1234"}, {"label": "Tommy Smith", "value": "12321"}]
Penyelam Dan

Jawaban:

216

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/

Andrew Whitaker
sumber
1
Sangat berguna! Bukankah maksud Anda$("#selected-customer").val(ui.item.value);
juanignaciosl
1
@juanignaciosl: Tidak - kode itu dimaksudkan untuk memperbarui kotak telusur dengan labelalih - alih value.
Andrew Whitaker
Saya menyimpan nilai di db bukan label, Jadi lain kali saya ingin mengatur label berdasarkan nilai. Bagaimana caranya melakukannya?
parth.hirpara
1
Hei, mencoba melakukan sesuatu yang serupa tetapi taruh semuanya focusalih-alih select. Masalah item.valuesedang ditetapkan, bukan item.label. Pokoknya untuk menghindari ini? lookup.autocomplete({ source: data, focus: function(event, ui) { event.preventDefault(); $(this).val(ui.item.label) status.text(ui.item.value) submitted.text(ui.item.submitted) comments.html(ui.item.comments) } })
Batman
Sama di sini, saya ingin label ditampilkan, nilai POST. Saya berhasil menambal kludge yang melibatkan elemen tersembunyi (mirip dengan jawaban @Yang Zhang di bawah ini, tetapi pada titik ini sepertinya memutar pelengkapan otomatis saya sendiri akan menjadi pendekatan yang paling tidak elegan.
Lori
15

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);
    }
});
Vlad
sumber
8

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>

Yang Zhang
sumber