Tự động hoàn thành áp dụng giá trị không phải nhãn cho hộp văn bản

Tôi đang gặp sự cố khi cố gắng làm cho tính năng tự động hoàn tất hoạt động bình thường.

Tất cả có vẻ ổn đối với tôi nhưng ...

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

Tuy nhiên, khi tôi chọn một mục từ menu thả xuống, giá trị sẽ được áp dụng cho hộp văn bản thay vì nhãn.

Tôi đã làm gì sai?

Nếu tôi xem nguồn bằng firebug, tôi có thể thấy rằng trường ẩn của tôi đang được cập nhật chính xác.

Hành vi mặc định của selectsự kiện là cập nhật inputvới ui.item.value. Mã này chạy sau trình xử lý sự kiện của bạn.

Chỉ cần quay lại falsehoặc gọi event.preventDefault()để ngăn điều này xảy ra. Tôi cũng khuyên bạn nên làm điều gì đó tương tự cho focussự kiện để tránh ui.item.valuebị đưa vào inputkhi người dùng di chuột qua các lựa chọn:

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

Ví dụ: http://jsfiddle.net/andrewwhitaker/LCv8L/

Chỉ muốn thêm rằng thay vì tham chiếu phần tử đầu vào bằng "id" bên trong các hàm gọi lại chọn và tiêu điểm, bạn có thể sử dụng bộ chọn này , như:

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

nó hữu ích khi bạn gán tính năng tự động hoàn thành cho nhiều phần tử, tức là theo lớp:

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

Trong trường hợp của tôi, tôi cần ghi lại một trường khác 'id' trong một đầu vào ẩn. Vì vậy, tôi thêm một trường khác trong dữ liệu trả về từ cuộc gọi ajax.

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

Và đã thêm liên kết 'tạo mới' ở cuối danh sách. Khi nhấp vào 'tạo mới', một phương thức sẽ bật lên và bạn có thể tạo mục mới từ đó.

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

Tôi nghĩ vấn đề là bạn có thể thêm bất kỳ trường dữ liệu bổ sung nào ngoài 'nhãn' và 'giá trị'.

Tôi sử dụng phương thức bootstrap và nó có thể như sau:

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