Автозаполнение пользовательского интерфейса jQuery отображает результаты в списке, но при выборе печатает значение, а не метку

У меня много проблем с работой автозаполнения. Сначала у меня возникла несовместимость проверки, потому что я использовал проверку jQuery и jQuery 1.5 и нарушал функции AJAX в виджете автозаполнения. Это было решено, теперь мой PHP-контроллер возвращает мне результаты JSON с меткой/значением. Конечно, label — это имя, которое я хочу показать, а значение — это значение, которое мне нужно отправить.

Я использую пример вывода JSON с PHP, только для тестирования, а не для поиска прямо сейчас. Это то, что я отправляю обратно, когда делаю запрос AJAX:

[{"label":"Client example","value":1},{"label":"Lorem Ipsum","value":2},{"label":"Microsoft","value":3}]

И, используя следующий код, я предположил, что он покажет мне непосредственно метку и отправит идентификатор. Когда я начинаю печатать, я вижу нужные результаты в списке Client example, Lorem Ipsum и Microsoft, но когда я выбираю один из них, список закрывается, и ввод показывает значение, а не метку.

$("#clientid").autocomplete({
    source: function(request, response) {
        $("#ajax-loader").fadeIn('normal');

        $.ajax({
            url: BASE_URL + 'projects/ajax/get_clients',
            data: request,
            dataType: "json",
            type: "POST",
            success: function(data) {
                response(data);
            }
        });

        $("#ajax-loader").fadeOut("normal");
    },
    minLength: 2
});

Я также попробовал код, который @3nigma предложил мне, когда я искал, почему не работает автозаполнение:

success: function(data) {
    response($.map( data, function( item ) {
        return {
            label: item.label,
            value: item.value
        }
    }));
}

И ничего. Глядя на примеры веб-сайта пользовательского интерфейса jQuery и Google, кажется, что select должен делать это, поэтому я попытался:

select: function(event, ui) {
    $("#clientid").val(ui.item.label);
}

Но тоже не работает. Я вижу значение <input />.

Я не знаю, что еще я могу попробовать. Как я могу решить эту проблему?

Заранее спасибо!


jquery jquery-ui jquery-ui-autocomplete jquery-autocomplete
person udexter    schedule 16.02.2011    source источник
comment
Посмотрите, что: stackoverflow.com/ вопросы/6716266/   -  person    schedule 08.03.2012

Ответы (2)


arrow_upward
4
arrow_downward

Один вход /› может хранить только значение без какой-либо метки.

<input type="text" value="Lorem Ipsum" name="myInput">

Автозаполнение просто устанавливает атрибут значения ввода, который точно такой же, как если бы вы вводили значение ввода. Невозможно напрямую отобразить на входе метку, которая отличалась бы от ее значения.

Вам нужно настроить источник данных, чтобы он возвращал значение, такое же, как метка.

[{"label":"Client example","value":"Client example"}...

но вы потеряете свою ценность. При обработке отправленной формы вы можете получить значение, используя метку, предполагая, что метка уникальна.

person filip    schedule 16.02.2011
comment
Итак... Мне нужно сделать скрытый ввод, чтобы сохранить идентификатор? Уникумов не будет ;-( - person udexter; 16.02.2011
comment
да, вы можете добавить скрытое поле, в котором будет храниться идентификатор. Вам нужно будет установить значение этого поля в коде автозаполнения js вручную. - person filip; 17.02.2011

arrow_upward
1
arrow_downward

Я смог добиться этого, используя 2 дополнительные строки кода в функциях select: и focus:.

в вашем случае добавьте эти

    select: function(event, ui) {
    event.preventDefault();
    $("#clientid").val(ui.item.label);
    },
    focus: function(event, ui) {
    event.preventDefault();
    $("#clientid").val(ui.item.label);
    }
person vjnexus    schedule 11.09.2013