2011-07-19 48 views
1


我正在尝试jQuery.UI库。开发Web接口是非常容易的这个库。我指的文档和演示使用自动完成“远程JSONP数据源” Here自动完成文本框与jQuery.UI

这是从远程源获取数据到自动完成文本框的完整代码。

$(function() { 
     function log(message) { 
      $("<div/>").text(message).prependTo("#log"); 
      $("#log").attr("scrollTop", 0); 
     } 

     $("#city").autocomplete({ 
      source: function(request, response) { 
       $.ajax({ 
        url: "http://ws.geonames.org/searchJSON", 
        dataType: "jsonp", 
        data: { 
         featureClass: "P", 
         style: "full", 
         maxRows: 12, 
         name_startsWith: request.term 
        }, 
        success: function(data) { 
         response($.map(data.geonames, function(item) { 
          return { 
           label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName, 
           value: item.name 
          } 
         })); 
        } 
       }); 
      }, 
      minLength: 2, 
      select: function(event, ui) { 
       log(ui.item ? 
        "Selected: " + ui.item.label : 
        "Nothing selected, input was " + this.value); 
      }, 
      open: function() { 
       $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); 
      }, 
      close: function() { 
       $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
      } 
     }); 
    }); 

我想知道下面的代码段的确切功能是什么。

success: function(data) { 
    response($.map(data.geonames, function(item) { 
     return { 
     label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName, 
     value: item.name 
     } 
    })); 
} 

$ .MAP(data.geonames,函数(项目)

在此先感谢

回答

2

这是一个有趣的一段代码。

特别

小部件需要一个对象数组,其中每个对象都有属性label和/或value。该代码试图创建的是一个看起来像这样的数组。

因此,调用$.map(这是一个非常有用的实用函数),它将从JSONP调用中检索到的对象数组转换为上述格式的对象数组。

的一种方式阅读本:

$.map(data.geonames, function(item) { 
     return { 
     label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName, 
     value: item.name 
} 

是:

在这个“利用给定函数取data.geonames阵列中的每个元素和改造元素创建一个新的阵列”情况下,函数只是建立一个对象,其中包含labelvalue属性,以便它可以与自动填充小部件一起使用。

然后,该新数组立即作为参数传递给response函数。

+0

嗨安德鲁,谢谢你的解释。它非常有用。 – SriniShine