自動建議使用ajax調用搜索框

Question

我有一個搜索框，在其中用戶點擊搜索詞時，我需要進行ajax調用，並且需要處理響應，然后可以為用戶更新搜索詞。

我嘗試使用javascript自動完成功能，但問題是應該在搜索框中輸入單詞“ abc”，我的功能會調用ajax，並且返回的建議很少。 如果用戶在進行Ajax調用后停止輸入，並且獲取了結果，則自動完成功能不會顯示可供用戶使用的選項。

這是我的代碼。

<input type="text" id="searchBox" value="search" />


function getSuggestions(query){
    SC.get('/search/suggest', { q: query, limit: 10, highlight_mode: 'offsets', linked_partitioning: 1, offset: 0}, function(tracks) {
        if(tracks.length<1){

          return;
        }
        var i = 0;
          tracks.suggestions.forEach(function(track){
            if(track.kind=="track"){              
                suggestList[i] = track.query;
                i++;
            }
          });

          $( "#searchBox" ).autocomplete({
                    source: suggestList
          });
      });
 }

此函數偵聽keyup。

$('#searchBox').keyup(function(e){
        var query = $(this).val();
        if(query.length<2)
          return;            
          setTimeout(function() { 
            getSuggestions(query); 
          }, 1000);

    });

但是，只要我再按一個按鈕，如果來自Ajax調用的當前結果算出新搜索詞，它將提示自動完成。

我為自己的運氣檢查了幾個插件，他們都希望搜索結果采用特定的JSON格式。

如果有人可以幫助我，那將有所幫助。

Answer 1

如果您的潛在建議清單不多，建議您預先提取

使用typeahead.js相當簡單（示例來自下面的鏈接）

$('#input').typeahead([
{
  name: 'countries',
  prefetch: '/countries.json',
}
]);

該博客概述了其某些功能

https://blog.twitter.com/2013/twitter-typeaheadjs-you-autocomplete-me