Каковы аргументы «response» и «request» в обратном вызове «source» jQuery UI Autocomplete? - PullRequest
8 голосов
/ 30 марта 2012

Я смотрю учебник по автозаполнению, и у меня есть несколько вопросов: http://jqueryui.com/demos/autocomplete/#option-disabled

$( "#tags" )
            // don't navigate away from the field on tab when selecting an item
            .bind( "keydown", function( event ) {
                if ( event.keyCode === $.ui.keyCode.TAB &&
                        $( this ).data( "autocomplete" ).menu.active ) {
                    event.preventDefault();
                }
            })
            .autocomplete({
                minLength: 0,
                source: function( request, response ) {
                    // delegate back to autocomplete, but extract the last term
                    response( $.ui.autocomplete.filter(
                        availableTags, extractLast( request.term ) ) );
                },
                focus: function() {
                    // prevent value inserted on focus
                    return false;
                },
                select: function( event, ui ) {
                    var terms = split( this.value );
                    // remove the current input
                    terms.pop();
                    // add the selected item
                    terms.push( ui.item.value );
                    // add placeholder to get the comma-and-space at the end
                    terms.push( "" );
                    this.value = terms.join( ", " );
                    return false;
                }
            });

Итак, я понимаю, что параметры для источника request и response. Это зарезервированные ключевые слова? Я не мог найти что-нибудь при вводе этого в Google. Мне неясно, к чему относится запрос и ответ. Запрос просто захватывает ввод? Где я могу прочитать больше об этом?

Ответы [ 3 ]

24 голосов
/ 30 марта 2012

Нет, request или response не являются зарезервированными ключевыми словами & ndash; если бы они были, вы не могли бы использовать их в качестве имен параметров функции ..

То, что здесь происходит, довольно просто, и если вы когда-нибудь сделаете что-нибудь в Node, вы увидите шаблон. Это асинхронный JavaScript.

Вы передаете анонимную функцию source. Эта функция вызывается всякий раз, когда автозаполнению требуется запросить источник данных (другими словами, пользователь что-то набрал).

Параметры функции: request и response. request - это просто информация, которую запрашивает автозаполнение; request.term - это запрос (что набрал пользователь). Вам решать, как реализовать поиск & ndash; возможно, у вас есть локальная переменная с возможностями, или вы можете сделать AJAX-вызов на сервер.

Теперь важная часть: если вы делаете вызов AJAX, вы не можете просто return значение из source(), потому что функция вернется задолго до завершения вызова AJAX. Вот почему есть параметр response.

response - это ссылка на функцию, переданную вашей функции source(), которую вы вызываете всякий раз, когда получаете ответ на запрос. С помощью магии замыканий вы можете вызывать эту функцию изнутри обратного вызова AJAX.

response (который может быть менее смутно назван callback) ожидает массив строк или объектов со свойствами label и value. Эти результаты будут показаны в выпадающем списке автозаполнения.

Собираем все вместе:

$('selector').autocomplete({
    ...
    source: function(request, response) {
        // calculate results for a query.
        response([{ label: 'Example', value: 'ex'  }]);
    }
});
15 голосов
/ 30 марта 2012

request и response - это просто имена, которые автор кода выбрал, чтобы дать двум формальным параметрам обратного вызова, назначенным опции source виджета автозаполнения:

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

  • Массив с локальными данными
  • Строка, указав URL
  • Обратный звонок

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

  • Объект запроса с единственным свойством, называемым «термин», который ссылается на на значение в настоящее время в текстовом вводе. Например, когда пользователь введя "new yo" в поле города, срок Автозаполнения будет равен "новый йо".
  • ответный обратный вызов, который ожидает один аргумент содержать данные, чтобы предложить пользователю. Эти данные должны быть отфильтрованы на основе предоставленного термина и может быть в любом из описанных форматов выше для простых локальных данных (String-Array или Object-Array с метка / значение / оба свойства). Это важно при предоставлении пользовательских обратный вызов источника для обработки ошибок во время запроса. Вы должны всегда вызвать ответный обратный вызов, даже если вы столкнулись с ошибкой. это гарантирует, что виджет всегда имеет правильное состояние.
0 голосов
/ 30 марта 2012

Это четко задокументировано на странице автозаполнения пользовательского интерфейса jQuery.

http://jqueryui.com/demos/autocomplete/

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

Объект запроса с единственным свойством, называемым «term», который ссылается на значение, которое в данный момент находится в текстовом вводе.Например, когда пользователь ввел «новое йо» в поле города, термин «автозаполнение» будет равен «новый йо».

Ответный обратный вызов, который ожидает, что один аргумент будет содержать данные, предлагаемые пользователю.Эти данные должны быть отфильтрованы на основе предоставленного термина и могут быть в любом из форматов, описанных выше для простых локальных данных (String-Array или Object-Array с меткой / значением / обоими свойствами).Это важно при предоставлении пользовательского обратного вызова источника для обработки ошибок во время запроса.Вы всегда должны вызывать ответный обратный вызов, даже если вы столкнулись с ошибкой.Это гарантирует, что виджет всегда имеет правильное состояние.

...