Typeahead 控件不工作

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()
  });
});

当页面加载时，我没有在控制台中看到任何错误window。但是，在我键入时，我没有在 Fiddler 中看到对服务器的任何请求。我希望在键入时看到向服务器发出的请求以查找建议。我做错了什么？

Answer 1

我觉得 jQuery 甚至没有被触发，因为你有多个 class id。尝试将其更改为

class="form-control typeahead tt-query"

至

class="typeahead"

或者，尝试从您的 jQuery 中删除 'input'（如下所示）

$('.typeahead').typeahead({

Answer 2

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

Answer 3

我怀疑这是因为您的 Bloodhound 实例不知道如何处理您提供给它的远程数据源。

在：

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

您已指定 'value'。您传递的 JSON 是否有带 'value' 键的 JSON 对象？如果不是，则不会解析数据，因此 Typeahead 不会显示任何建议。

您的 Typeahead 实例也不太正确（请参阅 here 了解文档）。您缺少 "options" 对象（如果您对默认值满意，则传入 null）。此外，数据集数组参数缺少 "displayKey" 值；这告诉 Typeahead 使用什么作为建议值。因此你应该：

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

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

Typeahead 控件不工作

Typeahead Control Not Working

javascript

typeahead.js

twitter-bootstrap-3