jQuery UI Autocomplete показывает, отображает в списке результаты, но при выборе печатает значение, а не метку - PullRequest
Новая
       22

jQuery UI Autocomplete показывает, отображает в списке результаты, но при выборе печатает значение, а не метку

2 голосов
/ 16 февраля 2011

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

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

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

И используя следующий код, я предположил, что он покажет мне метку и отправит идентификатор. Когда я начинаю печатать, я вижу результаты, которые я хочу, в списке клиентов, например, 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 UI и Google, кажется, что select должен сделать это, поэтому я попробовал: 

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

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

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

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

Ответы [ 2 ]

4 голосов
/ 16 февраля 2011

Один может хранить только значение без метки. 

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

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

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

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

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

1 голос
/ 12 сентября 2013

Мне удалось сделать это, используя 2 дополнительные строки кода в select: и focus: functions.

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

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