Подтвердить что ты не робот

Понимание и реализация автозаполнения jQuery с использованием источника AJAX и appendTo

Ниже моя попытка получить appendTo для работы с автозаполнением jQuery с источником AJAX.

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

1) source: function(request, response) {...} Что это делает? Почему это необходимо.

2) В каком формате function(data){ response($.map (data, function(obj) { возвращает данные? Я понимаю, что данные находятся в формате JSON, но в чем смысл .map? Нужно ли это делать? Есть ли преимущества?

3a) При использовании appendTo и renderItem необходимо ли возвращать вышеупомянутые данные success?

3b) Либо или, в зависимости от приведенных выше данных, как вы правильно используете appendTo и renderItem для изменения форматирования и отображения ваших полученных значений?

$(function() {
$( ".find_group_ac" ).autocomplete({
        minLength: 1,
        source: function(request, response) {
            $.ajax({
                url: "welcome/search/",
                data: { term: $(".find_group_ac").val()},
                dataType: "json",
                type: "POST",
                success: function(data){ response($.map
                        (data, function(obj) {
                            return {
                            label: obj.name + ': ' + obj.description,
                            value: obj.name,
                            id: obj.name
                };}));}
            });
        }
    }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
                .appendTo( ul );
        };
});

Это может показаться много, но я уверен, что это будет полезно многим новичкам javascript и, конечно же, самому.

4b9b3361

ОТВЕТЫ

Ответ 1

source: function(request, response) {...} Что это делает? Почему это необходимо.

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

В простейшем случае использования вы можете просто указать строку для параметра source, и виджет выдаст запрос GET на этот URL с добавленным ?term=(term). Поскольку вы выполняете POST и отправляете другой термин, вы должны использовать версию функции source.

PS: вы должны отправить вызов $.ajax request.term вместо $(".find_group_ac").val()

В каком формате функция (данные) {response ($. map (data, function (obj) { вернуть данные? Я понимаю, что данные находятся в формате JSON, но что точка .map? Нужно ли это делать? Есть ли преимущества?

Виджет автозаполнения ожидает источника данных массива, который соответствует одному из следующих требований:

  • Элемент должен быть одной строкой или:
  • Элемент должен быть объектом с свойством label, a value, свойством или и тем, и другим.

С учетом этого, если вы используете серверный ресурс, JSON которого не отформатирован таким образом, вам необходимо преобразовать данные для соответствия этим спецификациям, прежде чем передавать его функции response. Обычный способ сделать это - использовать $.map, который выполняет итерацию по массиву и преобразует каждый элемент.

При использовании appendTo и renderItem необходимо ли возвращать вышеупомянутые данные успеха?

Нет, но они часто используются вместе.

Скажите, что у вас есть дополнительное свойство (например, description), которое вы хотите отобразить в списке кандидатов. В этом случае вы можете преобразовать результат на стороне сервера в ожидаемый формат автозаполнения (включить label и value, но все равно включить description), но вы также хотите отобразить свойство description. В этом случае вам нужно перегрузить _renderItem.

Либо или, в зависимости от приведенных выше данных, как вы правильно используете appendTo и renderItem для изменения форматирования и отображения полученных значений?

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

$( ".find_group_ac" ).autocomplete({
    minLength: 1,
    source: function(request, response) {
        $.ajax({
            url: "welcome/search/",
            data: { term: $(".find_group_ac").val()},
            dataType: "json",
            type: "POST",
            success: function(data) { 
                response($.map(data, function(obj) {
                    return {
                        label: obj.name,
                        value: obj.name,
                        description: obj.description,
                        id: obj.name // don't really need this unless you're using it elsewhere.
                    };
                }));
            }

        });
    }
}).data( "autocomplete" )._renderItem = function( ul, item ) {
    // Inside of _renderItem you can use any property that exists on each item that we built
    // with $.map above */
    return $("<li></li>")
        .data("item.autocomplete", item)
        .append("<a>" + item.label + "<br>" + item.description + "</a>")
        .appendTo(ul);
};

Примеры на странице документации jQueryUI для автозаполнения на самом деле довольно обширны и могут быть полезны. В частности, обязательно проверьте: