通过Typeahead.js提供建议

Providing suggestions via Typeahead.js

本文关键字：Typeahead js 通过      更新时间：2023-09-26

我有一个使用Bootstrap，jQuery，Typeahead.js和Azure Search的应用程序。我正在尝试使用建议功能。为了做到这一点，我有以下几点：

var engine = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: 'https://my-app.search.windows.net/indexes/my-index/docs/suggest?api-version=2015-02-28',
    prepare: function (settings) {
      settings.type = 'POST';
      settings.contentType = 'application/json; charset=UTF-8';
      settings.data = { search: query, suggesterName: 'mySuggestions', top: 10 };                                                        
      return settings;
    }
  }
});
$('#searchField').typeahead([{
  minLength: 5,
  name: 'suggestions',
  source: engine
}]);

当我在搜索字段中输入文本时，我从未看到向 Fiddler 中的 Azure 搜索服务触发的请求。同时，我在控制台窗口中没有看到任何错误。我做错了什么？

有几件事对我来说似乎不对劲。首先是这个：

$('#searchField').typeahead([{
  minLength: 5,
  name: 'suggestions',
  source: engine
}]);

可能需要更像这样：

$('.typeahead').typeahead(null,{
  minLength: 5,
  source: engine
});

此外，引擎函数中的准备需要包含"查询"参数。

var engine = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: 'https://my-app.search.windows.net/indexes/my-index/docs/suggest?api-version=2015-02-28',
    prepare: function (query,settings) {
      settings.type = 'POST';
      settings.contentType = 'application/json; charset=UTF-8';
      settings.data = { search: query, suggesterName: 'mySuggestions', top: 10 };                                                        
      return settings;
    }
  }
});

你可以在这里看到一个工作的小提琴。

相关文章：