如何在JQuery的自動完成

使用JSON數組我有一個JSON數組，如下所示：如何在JQuery的自動完成

[{"country":"FR","id":2,"latitude":-34.27175846153846,"longitude":54.16125384615385,"postcode":"00000","region1":"DOM-TOM","region2":"Terres australes et antarctiques","region3":"Crozet","region4":"","version":null},{"country":"FR","id":3,"latitude":46.203635000000006,"longitude":5.20772,"postcode":"01000","region1":"Rhône-Alpes","region2":"Ain","region3":"Bourg-en-Bresse","region4":"Bourg-en-Bresse","version":null}, ...

我想使用這個數組作爲一個jQuery自動完成的來源。以下是我嘗試：

$(function() { 
    $("#postcode").autocomplete({ 
     source : function(request, response) { 
      var firstChars = $("#postcode").attr("value"); 
      $.getJSON("/kadjoukor/geolocations", { 
       postcodeFirstChars : firstChars 
      }, function(data) { 
       console.log(data.postcode); 
       response(data.postcode); 
      }); 
     }, 
     minLength : 3, 
    }); 
});

下面是HTML：

<input type="text" name="member.geolocation.postcode" value="" id="postcode" placeholder="Code postal" />

我想從這個JSON數組顯示郵政編碼變量。任何人都可以幫忙嗎？

來源

2012-10-23 balteo

'$（「＃郵政編碼」）ATTR（「值」）;'應該是'後request.term'，你需要使用'$ .map'到將陣列轉換爲自動完成所期望的陣列格式。在http://jqueryui.com的api文檔中有（是？）一個很好的例子。 –

http://jqueryui.com/autocomplete/#remote-jsonp –

@KevinB，你可以包含一個代碼片段嗎？我不確定在js代碼中使用'request.term'的位置......還有什麼是autocomplete所期望的數組格式？ – balteo

您應該將結果數組轉換爲標籤值對。在你的情況下，可以像

source : function(request, response) { 
     var firstChars = $("#postcode").attr("value"); 
     $.getJSON("/kadjoukor/geolocations", { 
      postcodeFirstChars : firstChars 
     }, function(data) { 
      console.log(data.postcode); 
      response($.map(data, function (item) { 
        return { 
         label: item.postcode, 
         value: item.postcode 
        }; 
       })); 
     }); 
    },

來源

2012-10-23 15:56:59 lavrik

嗨Lavrik。感謝代碼。我不知道如何獲得給定json數組的postcode變量。看來data.postcode在console.log中不起作用... – balteo

不知何故'console.log（data.postcode）;'行導致autocompete不起作用。通過刪除這條線現在它的作品。非常感謝Lavrik！ – balteo

這將是'data [0] .postcode'因爲數據是一個數組 –

如何在JQuery的自動完成

回答

相關問題