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

Auto Suggestion for a searchbox search using ajax call

本文关键字：搜索 调用 使用 ajax      更新时间：2023-09-26

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

我试着使用javascript自动完成功能，但问题是假设我在searchbox中键入单词"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格式。

如果有人能帮我，那将是有帮助的。

如果你的潜在建议列表不是很大，那么它可能值得预先获取

使用typeahead.js（下面链接中的示例）相当简单

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

这个博客提供了的一些功能概述

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

相关文章：