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

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

81 голосов
/ 04 октября 2011

У меня проблемы с попыткой заставить автозаполнение работать должным образом.

Все это выглядит нормально для меня, но .... 

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

Однако, когда я выбираю элемент из выпадающего списка, значение применяется к текстовому полю, а не к метке.

Что я сделал не так?

Если я посмотрю на источник с помощью firebug, то увижу, что мое скрытое поле обновляется правильно.

Ответы [ 3 ]

199 голосов
/ 04 октября 2011

Поведение по умолчанию для события select заключается в обновлении input с помощью ui.item.value.Этот код запускается после вашего обработчика событий.

Просто верните false или позвоните event.preventDefault(), чтобы этого не произошло.Я бы также рекомендовал сделать что-то подобное для события focus, чтобы предотвратить размещение ui.item.value в input, когда пользователь наводит курсор на выбор: 

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

Пример: http://jsfiddle.net/andrewwhitaker/LCv8L/

15 голосов
/ 20 марта 2014

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

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

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

$(".className").autocomplete({
...
    focus: function(event, ui) {
        event.preventDefault();
        $(this).val(ui.item.label);
    }
});
7 голосов
/ 15 июня 2015

В моем случае мне нужно записать другое поле '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');
            }
        }
    );

Думаю, дело в том, что вы можете добавить любое дополнительное поле данных, кроме «label» и «value».

Я использую мод начальной загрузки, и это может быть как показано ниже: 

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

...