自動完成顯示所有結果

Question

從第format.json頁收集數據。

在JS，我有：

$('input[name="q"]').autoComplete({ 
    source: function(term, response){ 
     $.getJSON('/search.json', { q: term }, function(data){ response(data); }); 
    } 
}); 

對於自動完成我用這個plugin。

什麼是負責輸出？

我在自動填充中刪除了所有名稱。掉出來只需要申請。只需要刪除那些重合的部分。

是否負責.indexOf(term)？使用什麼？

屏幕顯示所有結果（有比賽和那些沒有匹配的是誰）。只需要看到那些有匹配的。

Answer 1

正在從JSON文件獲取數據時，您必須在客戶端進行過濾。它可以與服務器的實際AJAX請求一起工作，您可以在服務器上執行過濾以僅返回所需的數據（這就是爲什麼您將查詢條件作爲參數發送的原因）。

所以，你需要改變你的代碼看起來像這樣：

$('input[name="q"]').autoComplete({ 
    source: function (term, response) { 
     $.getJSON('/search.json', function (data) { 
      term = term.toLowerCase(); 
      var matches = []; 
      for (i = 0; i < data.length; i++) 
       if (~data[i].toLowerCase().indexOf(term)) matches.push(data[i]); 
      response(matches); 
     }); 
    } 
}); 

你可能需要做一些不同，這取決於你的data結構是什麼樣子，但我假設它是一個數組串

編輯

如果你想限制你的比賽，你可以做到這一點的for循環，而不是在最後一行，這將是更好的性能，因爲它不會有循環周圍，一旦你有5場比賽

$('input[name="q"]').autoComplete({ 
    source: function (term, response) { 
     $.getJSON('/search.json', function (data) { 
      term = term.toLowerCase(); 
      var matches = []; 
      for (i = 0; i < data.length; i++) 
       if (~data[i].toLowerCase().indexOf(term) && matches.length == 4) { 
        matches.push(data[i]); 
        break; 
       } 
      response(matches); 
     }); 
    } 
});