Question

我有一个搜索框，一旦用户点击搜索词，我需要进行ajax调用并且需要处理响应，然后我可以为用户更新搜索词。

我尝试使用javascript自动完成功能，但问题是我输入单词＆＃34; abc＆＃34;在搜索框中，我的函数进行了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

使用ajax调用进行搜索框搜索的自动建议

1 个答案: