Otomatik tamamlama, metin kutusuna etiketsiz değer uygulama

Otomatik tamamlamanın düzgün çalışmasını sağlamaya çalışırken sorunlar yaşıyorum.

Bana her şey yolunda görünüyor ama ...

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

Ancak açılır menüden bir öğe seçtiğimde değer etiket yerine metin kutusuna uygulanıyor.

Neyi yanlış yaptım?

Firebug kullanarak kaynağa bakarsam, gizli alanımın doğru şekilde güncellendiğini görebilirim.

Varsayılan davranışı selectolay güncelleştirmektir inputile ui.item.value. Bu kod çalışır sonra , olay işleyicinizden .

Bunun olmasını önlemek için geri dönün falseveya arayın event.preventDefault(). Ben de benzer bir şey yapıyor öneriyoruz focusönlemek için olay ui.item.valuekonuyor gelen inputseçimler üzerinden kullanıcı olarak gezinen:

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

Örnek: http://jsfiddle.net/andrewwhitaker/LCv8L/

Seçim ve odak geri çağırma işlevlerinde girdi öğesine "id" ile başvurmak yerine bu seçiciyi kullanabilirsiniz , örneğin:

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

birden çok öğe için otomatik tamamlama atadığınızda kullanışlıdır, yani sınıfa göre:

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

Benim durumumda, gizli bir girişe başka bir 'id' alanını kaydetmem gerekiyor. Bu yüzden ajax çağrısından dönen verilere başka bir alan ekliyorum.

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

Ve listenin altına bir 'yeni oluştur' bağlantısı ekledik. "Yeni oluştur" u tıkladığınızda, bir modal açılır ve oradan yeni öğe oluşturabilirsiniz.

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

Bence önemli olan, sadece 'etiket' ve 'değer' dışında herhangi bir ekstra veri alanı ekleyebilmenizdir.

Bootstrap modal kullanıyorum ve aşağıdaki gibi olabilir:

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