Автозаполнение применения значения, а не метки для текстового поля

Просто хотел бы добавить, что вместо ссылки на элемент ввода на "id" внутри выберите и focus вы можете использовать этот селектор, например:

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

полезно, когда вы назначаете автозаполнение для нескольких элементов, то есть классом:

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

В моем случае мне нужно записать другое поле 'id' в скрытый ввод. Поэтому я добавляю другое поле в данные, возвращенные из вызова ajax.

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

И добавили ссылку "Создать новую" в нижней части списка. После нажатия кнопки "Создать новый" появится модальная мода, и вы сможете создать там новый элемент.

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

Я считаю, что вы можете добавить любое дополнительное поле данных, отличное от "метки" и "значения".

Я использую bootstrap modal, и он может быть следующим:

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