JQuery: автозаполнение с удаленным источником XML - PullRequest
Новая
       3

JQuery: автозаполнение с удаленным источником XML

1 голос
/ 27 октября 2010

Я пытаюсь реализовать текстовое поле автозаполнения, значения которого генерируются удаленным сценарием, возвращающим содержимое XML. Я использую JQuery-1.4.3 и виджет автозаполнения из JQuery-UI-1.8.5.

Я изучил демонстрационную страницу автозаполнения для XML-данных, проанализированных один раз , и пытаюсь реализовать комментарии:

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

В качестве теста я пытаюсь заставить это работать с прилагаемой демонстрацией XML. Приведенный выше комментарий говорит о том, что свойство 'автозаполнения' автозаполнения должно быть заменено вызовом Ajax. Тем не менее, когда я изменяю это в функции, предоставленной на демонстрационной странице , я не получаю никаких результатов со следующей функцией автозаполнения: 

$( "#birds" ).autocomplete({
  source: function(request, response) {
    $.ajax({
      url: "london.xml",
      dataType: "xml",
      success: function( xmlResponse ) {
        var data = $( "geoname", xmlResponse ).map(function() {
//alert($('name', this).text());
          return {
            value: $( "name", this ).text() + ", " +
                   ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ),
            id: $( "geonameId", this ).text()
          };
        }).get();
      }
    })
  },
  minLength: 0,
  select: function( event, ui ) {
    log( ui.item ?
         "Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
         "Nothing selected, input was " + this.value );
  }
});

Тем не менее, комментирование простого всплывающего сообщения отладки показывает, что вызову Ajax удается получить значения, использованные при построении данных. Где моя ошибка?

Любая помощь высоко ценится!

С уважением,

Рон Ван ден Бранден

1 Ответ

3 голосов
/ 28 октября 2010

Хорошо,

Я нашел решение и с удовольствием отвечу сам.

В своей первоначальной попытке я объявил переменную data в обратном вызове успеха для функции Ajax., но ничего с этим не сделал.Решение достаточно простое: добавьте функцию response (), которая будет возвращать переменную данных в случае успешного вызова ajax.Я добавлю полную исправленную функцию (хотя единственное изменение - в строке 14): Скопируйте код 

$( "#birds" ).autocomplete({
   source: function(request, response) {
     $.ajax({
       url: "london.xml",
       dataType: "xml",
       success: function( xmlResponse ) {
         var data = $( "geoname", xmlResponse ).map(function() {
           return {
             value: $( "name", this ).text() + ", " +
                     ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ),
             id: $( "geonameId", this ).text()
           };
         });
       response(data);
       }
     })
   },
   minLength: 0,
   select: function( event, ui ) {
     log( ui.item ?
       "Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
       "Nothing selected, input was " + this.value );
   }
 });

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

     $.ajax({
       url: "london.xml",
       dataType: "xml",
       success: function( xmlResponse ) {
         response($( "geoname", xmlResponse ).map(function() {
           return {
             value: $( "name", this ).text() + ", " +
                     ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ),
             id: $( "geonameId", this ).text()
           };
         }));
       }
     })
   }

(примечание: эти фрагменты функций работают при вставке в демонстрационную программу автозаполнения 'remote XML' )

Фу!Теперь давайте сделаем что-нибудь полезное с этим.

Рон

...