Question

我正在尝试使用typeahead.js。我的代码如下所示：

<input id="query" type="search" class="form-control typeahead tt-query" autocomplete="off" spellcheck="false" placeholder="Search by typing anything" />

...

var URL_ROOT = '[populated on server. Something like "http://localhost:8080"]';
var suggestions = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: URL_ROOT + '/api/suggestions?querytext=%QUERY'
}); 
suggestions.initialize();

$(document).ready(function() {
  $('input.typeahead').typeahead({
    source: suggestions.ttAdapter()
  });
});

当页面加载时，我 not 在控制台窗口中看到任何错误。正如我输入的那样，我在Fiddler中看不到对服务器的任何请求。我希望当我键入以查看向服务器发出请求以查找建议时。我做错了什么？

Answer 1

$('input.typeahead').typeahead(null,{
    source: suggestions.ttAdapter()
});

Answer 2

我怀疑它是因为你的Bloodhound实例不知道如何处理你正在喂它的远程数据源。

在：

datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value')

您已指定＆＃39;值＆＃39;。您传递的JSON是否具有带有＆＃39;值的JSON对象＆＃39;键？如果不是，则不会解析基准，因此Typeahead将不会显示任何建议。

此外，您的Typeahead实例不太正确（有关文档，请参阅here）。你错过了一个＆＃34;选项＆＃34; object（如果你对默认值感到满意，则传入null）。此外，数据集数组参数缺少＆＃34; displayKey＆＃34;值;这告诉Typeahead将什么用作建议值。因此你应该：

$('input.typeahead').typeahead(null,{
    source: suggestions.ttAdapter(),
    displayKey: 'value' });

可以找到使用远程数据源的Typeahead.js的完整工作示例here。

Answer 3

我觉得jQuery甚至没有触发，因为你有多个类id。尝试从

更改它

class="form-control typeahead tt-query"

到

class="typeahead"

或者，尝试从jQuery中删除“input”（如下所示）

$('.typeahead').typeahead({

预先控制不起作用

3 个答案: