jquery：使用远程 xml 源自动完成

Question

我正在尝试实现一个自动完成文本框，其值由返回 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 调用确实设法检索用于构造数据的值。我的错误在哪里？

非常感谢任何帮助！

亲切的问候，

罗恩·范登布兰登

Answer 1

好吧，

我已经找到了解决方案，并且可以很高兴地回答自己。

在我最初的尝试中，我在 Ajax 函数的成功回调中声明了变量“data”，但没有对它执行任何操作。解决方案很简单：添加一个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'自动完成演示时起作用）

唷！现在开始用这个做一些有用的事情。

罗恩