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

Question

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

我正在使用Twitter Bootstrap 3，这个版本已经将typeahead插件移到了自己的库中，并且不再维护旧的typeahead插件。

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

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

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

您可以像这样使用上述事件：

// 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 建议渲染自定义事件
twitter bootstrap 3 typeahead 建议渲染的自定义事件
twitter bootstrap 3 typeahead 建议渲染回调
twitter bootstrap 3 typeahead 建议渲染获取数据回调

最后.. 我在 github 上找到了一个帖子，指出此功能已被请求并等待实施（尽管此评论来自 10 个月前）。

Answer 1

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

步骤 1

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

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

第二步

将上面的行更改为：

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

第三步

最后在您的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，您将拥有事件类型和数据！ :)

Answer 2

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