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

86

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

Мне все кажется нормальным, но ....

<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, я вижу, что мое скрытое поле обновляется правильно.

Дайвер Дэн
источник
1
Что вы видите в ответе JSON в Firebug?
SLaks 04
[{"label": "Том Смит", "value": "1234"}, {"label": "Tommy Smith", "value": "12321"}]
Дайвер Дэн

Ответы:

215

По умолчанию 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/

Эндрю Уитакер
источник
1
Очень полезно! Разве вы не имели в виду$("#selected-customer").val(ui.item.value);
juanignaciosl
1
@juanignaciosl: Нет - это код предназначен для обновления в окне поиска с labelвместо value.
Эндрю Уитакер
Я сохраняю значение в db, а не в метке, поэтому в следующий раз я хочу установить соответствующую метку на основе значения. Как это сделать?
parth.hirpara
1
Эй, попробуй сделать что-то похожее, но вложи все focusвместо select. Проблема item.valueставится вместо item.label. В любом случае, чтобы обойти это? 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
То же самое, я хочу отображать метку, значение POSTed. Мне удалось собрать клудж, включающий скрытый элемент (похоже на ответ @Yang Zhang ниже, но на данный момент похоже, что прокатка моего собственного автозаполнения будет наименее неэлегантным подходом.
Лори
15

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

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

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

$(".className").autocomplete({
...
    focus: function(event, ui) {
        event.preventDefault();
        $(this).val(ui.item.label);
    }
});
Влад
источник
8

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

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

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

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

Ян Чжан
источник