2010-11-24 9 views
2

我正在查看this jQuery Autocomplete example我需要在這個jQuery Autocomplete示例中更改以使其與我的JSON url一起工作?

我無法弄清楚這個代碼有多少取決於返回的JSON數據的結構。

例如,下面有一行:

name_startsWith: request.term 

name_startsWith或定義其他地方的功能某種類型的隱函數?

它指的是什麼reqest.term?我找不到在html文檔中任何其他地方引用的文本term

我想嘗試用我自己的JSON url替換爲示例來查看它是否有效,但我不知道基於JSON響應數據的結構需要更改多少示例。

<script> 
    $(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"); 
      } 
     }); 
    }); 
    </script> 
</head> 
<body> 

<div class="demo"> 

<div class="ui-widget"> 
    <label for="city">Your city: </label> 
    <input id="city" /> 
    Powered by <a href="http://geonames.org">geonames.org</a> 
</div> 

<div class="ui-widget" style="margin-top:2em; font-family:Arial"> 
    Result: 
    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> 
</div> 

</div><!-- End demo --> 

回答

5

data參數只是一個POJO(Plain Old Javascript Object),它被序列化爲JSON字符串並作爲參數集合發送到服務器。

從本質上說,您發佈的4個參數:featureClassstylemaxRowsname_startsWith與價值觀"p""full"12request.term值(這是通過自動完成插件的request參數提供,我相信) 。

然後服務器處理從客戶端獲取的參數和返回另一個JSON串,包含下列對象此時:

jsonp1290623850128({ 
    "totalResultsCount": 55, 
    "geonames": [{ 
     "countryName": "Indonesia", 
     "adminCode1": "30", 
     "fclName": "city, village,...", 
     "score": 19.488441467285156, 
     "countryCode": "ID", 
     "lng": 106.4183333, 
     "adminName2": "", 
     "adminName3": "", 
     "fcodeName": "populated place", 
     "adminName4": "", 
     "timezone": { 
      "dstOffset": 7, 
      "gmtOffset": 7, 
      "timeZoneId": "Asia/Jakarta" 
     }, 
     "toponymName": "Test", 
     "fcl": "P", 
     "continentCode": "AS", 
     "name": "Test", 
     "fcode": "PPL", 
     "geonameId": 1959830, 
     "lat": -6.1052778, 
     "adminName1": "West Java", 
     "population": 0 
    }, 
    { 
     "alternateNames": [{ 
      "name": "http://en.wikipedia.org/wiki/Pomerode", 
      "lang": "link" 
     }], 
     "countryName": "Brazil", 
     "adminCode1": "26", 
     "fclName": "city, village,...", 
     "score": 18.81304168701172, 
     "countryCode": "BR", 
     "lng": -49.17694444, 
     "adminName2": "", 
     "adminName3": "", 
     "fcodeName": "populated place", 
     "adminName4": "", 
     "timezone": { 
      "dstOffset": -3, 
      "gmtOffset": -2, 
      "timeZoneId": "America/Sao_Paulo" 
     }, 
     "toponymName": "Testo", 
     "fcl": "P", 
     "continentCode": "SA", 
     "name": "Testo", 
     "fcode": "PPL", 
     "geonameId": 3453245, 
     "lat": -26.74055556, 
     "adminName1": "Santa Catarina", 
     "population": 21898 
    }, 
    // ---- [snip] ---- 
    { 
     "countryName": "Turkey", 
     "adminCode1": "23", 
     "fclName": "city, village,...", 
     "score": 13.442560195922852, 
     "countryCode": "TR", 
     "lng": 39.126705, 
     "adminName2": "", 
     "adminName3": "", 
     "fcodeName": "populated place", 
     "adminName4": "", 
     "timezone": { 
      "dstOffset": 3, 
      "gmtOffset": 2, 
      "timeZoneId": "Europe/Istanbul" 
     }, 
     "toponymName": "Testek", 
     "fcl": "P", 
     "continentCode": "AS", 
     "name": "Testek", 
     "fcode": "PPL", 
     "geonameId": 299236, 
     "lat": 38.458786, 
     "adminName1": "Elazığ", 
     "population": 0 
    }] 
}); 

這基本上是具有兩個屬性的對象:totalResultsCount,包含的數結果作爲包含結果對象數組攜帶特定的性質,例如countryNamename,​​的整數,並且geonames

這JSON對象被在success函數的消耗n中的$.ajax()功能,在這裏可以遍歷各個對象內:

for(var i = 0; i < data.geonames.length; i++) { 
    var current = data.geonames[i]; // the current object 
} 

在您的示例地圖功能簡單地每個結果轉換成一個新的對象(含有labelvalue屬性)並把它們收集到一個數組該被傳入response函數(通過Widget傳遞給您的AJAX調用)。

因此,要回答你的問題,如果你只是想改變URL,服務需要用與我粘貼的JSON結構相同的JSON結構來回答。如果沒有,您可以更改success函數以匹配服務返回的JSON結構。

0

name_startsWith是您傳遞的變量的名稱。

request.term很可能是#city輸入字段的值。

相關問題