Twitter Typeahead.js，`suggestionsRendered`事件回调，如何获取建议数据？

Question

如何挂钩Twitter的Typeahead的suggestionsRendered事件并访问过滤后的数据，以便我可以使用这些数据更新我的表？

我正在使用Twitter Bootstrap 3，此版本已将typeahead插件移至其自己的库中，并且不再维护旧的预先输入插件。

我已经设置了typeahead以便按照我的意愿工作，但我有一个问题，我希望在suggestionsRendered内部触发后，我希望该库触发回调。

通过正常方式附加事件不起作用，目前唯一可用的事件位于此处：https://github.com/twitter/typeahead.js#custom-events

• typeahead:initialized （在预先输入预先输入（和预取数据）时触发）
• typeahead:opened （打开预先输入建议框时触发）
• typeahead:closed （在预先输入建议框时关闭）
• typeahead:selected （在选择建议时触发）
• typeahead:autocompleted （在标签按下或自动完成时触发）

您可以使用上述事件：

// This is how you use the above events.
$searchTypeahead.on('typeahead:selected',function(evt,data){
    console.log('typeahead:selected');
    console.log(data); // Contains the selected items data
});

<小时/>

问题

当有人输入输入字段时，我想更新表格内的行，我不能使用上述任何事件来更新表格，因为我输入（它们仅适用于点击，选择，悬停等..）。

如何检索suggestionsRendered呈现的过滤数据？ （因此，我不想将其渲染到预先输入框中，而是想访问所有项目，因此我可以遍历它们，并将它们添加到表格中。）

我尝试使用谷歌搜索（为SEO列出）:(但查找与typeahead的旧版（和未维护版）相关的信息）

twitter bootstrap 3 typeahead suggestionsRendered custom event
twitter bootstrap 3 typeahead suggestionRendered custom event
twitter bootstrap 3 typeahead suggestionsRendered callback
twitter bootstrap 3 typeahead suggestionsRendered get data callback

最后..我在github上发现了一个线程，声明已经请求了这个功能并且正在等待实现（尽管这个评论来自10个月前）。

Answer 1

目前这个功能正在等待实现（以及一堆其他回调），我找到了一个简单的解决方案（需要编辑核心typeahead.js库）

第1步

在typeahead.js内找到以下行（Line: 840中的约v0.9.3）。

// Within Class DropdownView
renderSuggestions: function(dataset, suggestions) {
...
    this.trigger("suggestionsRendered"); // Find this line! approx line: 840
...
}

第2步

将以上行更改为：

renderSuggestions: function(dataset, suggestions) {
...
    this.trigger("suggestionsRendered", suggestions); // Pass "suggestions" var
...
}

第3步

最后在您的HTML页面（或Javascript文件）中，使用以下内容附加event：

// When you initialize your typeahead, store it into a variable
$typeahead = $('#your-typeahead-input-id-or-class').typeahead({options});

// Access that elements data property, and attach the event to dropdownView
$typeahead.data('ttView').dropdownView.on('suggestionsRendered', function (evtObj) {
    console.log(evtObj.type); // Holds the event type: "suggestionsRendered"
    console.log(evtObj.data); // Holds results of filtered data: Object
    console.log("suggestionsRendered event callback fired");
    // Do your stuffs..
});

<小时/>

多数民众赞成！

如果您记录evtObj var，您将拥有事件类型AND数据！ ：）

Answer 2

我相信这个处理事件的例子现在更具相关性：https://github.com/twitter/typeahead.js/issues/300