jQuery:使用远程xml源自动完成 [英] jquery: autocomplete with remote xml source

问题描述

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

I am trying to implement an autocomplete textbox whose values are generated by a remote script returning XML contents. I'm using JQuery-1.4.3 and the autocomplete widget from JQuery-UI-1.8.5.

我研究了一次解析XML数据示例的自动完成演示页面，并尝试实施评论:

I've studied the autocomplete demo page for the XML data parsed once example, and am trying to implement the comments:

这也应该作为如何解析远程XML数据源的参考-解析仅针对源回调中的每个请求进行.

This should also serve as a reference on how to parse a remote XML datasource - the parsing would just happen for each request within the source-callback.

作为一个测试，我正在尝试使用提供的XML演示进行此操作.上面的注释表明，必须使用Ajax调用来替换自动完成的'source'属性.但是，当我在演示页面提供的函数中对此进行修改时，我不是通过以下自动完成功能获得任何结果:

As a test, I'm trying to get this working with the supplied XML demo. Above comment suggests that the autocomplete 'source' property has to be replaced with the Ajax call. Yet, when I modify this in the function supplied at the demo page, I'm not getting any results with following autocomplete function:

$( "#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调用确实设法检索了用于构造数据的值.我的错误在哪里?

Still, commenting out the simple debug popup message shows that the Ajax call does manage to retrieve the values used in constructing the data. Where's my mistake?

任何帮助，不胜感激！

亲切的问候，

Ron Van den Branden

Ron Van den Branden

推荐答案

好，

我找到了解决方案，很高兴能回答自己.

I've found the solution, and can gladly answer myself.

在我最初的尝试中，我在Ajax函数的成功回调中声明了变量"data"，但未对其执行任何操作.解决方案非常简单:添加一个response()函数，如果ajax调用成功，该函数将返回数据变量.我将添加完整的更正函数(尽管唯一的变化是在第14行上): 复制代码

In my original attempt, I declared the variable 'data' in the success callback for the Ajax function, but didn't do anything with it. The solution is simple enough: add a response() function that will return the data variable if the ajax call is successful. I'll add the complete corrected function (though the sole change is on line 14): Copy code

$( "#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 );
   }
 });

当然，在这种情况下，可以直接构造响应，而无需先声明数据变量: 复制代码

Of course, in this case the response can be constructed directly, without first declaring a data variable: Copy code

     $.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"自动完成演示)

Ph！现在继续做一些有用的事情.

Phew! Now on to doing something useful with this.

罗恩

这篇关于jQuery:使用远程xml源自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！