预输入控制不起作用答案

【问题标题】：Typeahead Control Not Working预输入控制不起作用
【发布时间】：2015-01-07 13:53:55
【问题描述】：

我正在尝试使用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()
  });
});

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

【问题讨论】：

您能否附上您传递给 Typeahead 实例的 JSON 样本？
你能告诉我为什么我的回答没有得到赏金吗？这是第一个也是正确的答案
@arisalexis - 另一个答案更完整。
很抱歉，我回答了您的问题，即为什么您在输入时没有点击服务器，并且答案是正确的。另一个人回答了你没有要求的东西。请尊重规则，并给予我的回答赏金。

标签： javascript twitter-bootstrap-3 typeahead.js

【解决方案1】：

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

在：

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

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

此外，您的 Typeahead 实例也不完全正确（有关文档，请参阅 here）。您缺少一个“选项”对象（如果您对默认值感到满意，则传入 null）。此外，datasets 数组参数缺少“displayKey”值；这告诉 Typeahead 使用什么作为建议值。因此，您应该：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

很遗憾看到这个答案没有得到赏金，因为它产生了用户要求的请求。回答可增强答案的替代未问问题是可以的，但我仍然提前几个小时回答了这个问题。获得高评价应该没有关系。

【解决方案3】：

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

class="form-control typeahead tt-query"

到

class="typeahead"

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

$('.typeahead').typeahead({

【讨论】：