Question

我正在尝试实现一个自动完成文本框，其值由返回XML内容的远程脚本生成。我正在使用JQuery-1.4.3和JQuery-UI-1.8.5中的自动完成小部件。

我研究了XML data parsed once示例的自动完成演示页面，并尝试实施评论：

这也应该作为如何解析远程XML数据源的参考 - 解析将发生在源回调中的每个请求。

作为测试，我正在尝试使用提供的XML演示。以上评论表明自动完成'source'属性必须用Ajax调用替换。然而，当我在demo page提供的函数中修改它时，我没有得到任何具有以下自动完成功能的结果：

$( "#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调用确实设法检索构造数据时使用的值。哪里是我的错？

非常感谢任何帮助！

亲切的问候，

Ron Van den Branden

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' autocomplete demo）

时，这些功能片段可以正常工作

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

罗恩

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

1 个答案: