1

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

非常感谢任何帮助！

亲切的问候，

罗恩·范登·布兰登

4

1 回答 1

3

行，

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

在我最初的尝试中，我在 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()
           };
         }));
       }
     })
   }

（注意：这些函数片段在插入“远程 XML”自动完成演示时有效）

呸！现在开始做一些有用的事情。

罗恩

于 2010-10-28T09:15:04.760 回答