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

Ответ 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 для автозаполнения на самом деле довольно обширны и могут быть полезны. В частности, обязательно проверьте:

• Пользовательские данные и отображение
• Удаленный источник данных JSONP