顯示自動完成jQuery UI中的數據

Question

我創建了一個自動完成功能，當我console.log它顯示我在遠程JSON文件中的所有我的文件，但當我嘗試顯示它時，我開始鍵入輸入它不什麼都不顯示，沒有錯誤，但它根本不起作用。此外，我想使這個多選擇自動完成。但現在我希望它只顯示建議，當我開始鍵入輸入。

$(function() { 
    $("#city").autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
     url: $('#city').attr('data-source'), 
     success: function (data) { 
      for (var i = 0; i < data.length; i++) { 
      data[i].loc_name 
      } 
     } 
     }) 
    } 
    }) 
}) 

JSON

[{"population":1729119,"token":"167|7|179|1296|55544|0","loc_name":"Warszawa"},{"population":758463,"token":"167|6|135|976|7644|0","loc_name":"Krak\u00f3w"},{"population":718960,"token":"167|5|113|789|58247|25218","loc_name":"\u0141\u00f3d\u017a Teofil\u00f3w"},{"population":718960,"token":"167|5|113|789|58247|25340","loc_name":"\u0141\u00f3d\u017a G\u00f3rna"},{"population":718960,"token":"167|5|113|789|58247|25282","loc_name":"\u0141\u00f3d\u017a \u0141askowice"}] 

Answer 1

的問題是因爲你的AJAX邏輯是不完全正確。一旦完成AJAX你需要提供接收到的數據response回調，像這樣：

$("#city").autocomplete({ 
    source: function (request, response) { 
    $.ajax({ 
     url: $('#city').data('source'), 
     success: function(data) { 
     var output = data.map(function(o) { 
      return { 
      label: o.loc_name, 
      value: o.token 
      } 
     }); 
     response(output); 
     } 
    }) 
    } 
}) 

這是假設該data在返回的格式自動完成預期的格式相匹配。如果沒有，你將不得不修改陣列 - 最好在服務器上。