Синтаксис автозаполнения интерфейса JQuery UI - PullRequest
Новая
       4

Синтаксис автозаполнения интерфейса JQuery UI

5 голосов
/ 26 декабря 2010

Может кто-нибудь помочь мне понять следующий код?Я нашел это здесь .

Он использует автозаполнение интерфейса JQuery UI с удаленным источником.Я прокомментировал код как можно лучше, и за ним следует более точный вопрос. 

    $( "#city" ).autocomplete({
        source: function( request, response )  {
//request is an objet which contains the user input so far
// response is a callback expecting an argument with the values to autocomplete with
            $.ajax({
                url: "http://ws.geonames.org/searchJSON", //where is script located 
                dataType: "jsonp", //type of data we send the script
                data: { //what data do we send the script 
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: request.term
                },
                success: function( data ) { //CONFUSED!
                    response( 
                        $.map( 
                        data.geonames, function( item ) { 
                                            return {
                                                    label: item.name+(item.adminName1 ? ","+item.adminName1:"")+","+item.countryName,   
        value: item.name
                                            }
                                        }
                        )
                    );
                  }
            });
        }
    });

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

Я знаю, что литерал функции успеха - это опция AJAX, которая вызывается при возврате запроса AJAX.В этом случае, кажется, инкапсулировать вызов ответного обратного вызова?Который определяется где?Я думал, по определению обратного вызова, он должен быть вызван сам по себе?

Спасибо!

1 Ответ

6 голосов
/ 26 декабря 2010

Объект response, как определено в документации (страница «Обзор»):

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

Итак, аргумент 'response' на самом деле является обратным вызовом, который должен вызываться при успешном извлечении ajax элементов автозаполнения.

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

Вы можете видеть объект response, определенный в объявлении функции, используемой для опции source: 

source: function( request, response )

Вы могли бы даже взять вызов AJAX из уравнения и сделать что-то вроде этого: 

source: function(request, response) {
    response([{label:'foo', value: 'foo'},{label:'bar', value:'bar'}]);
}

Сразу вызовет обратный вызов response с массивом пар метка / значение для виджета.

...