使用 typeahead 和 Bloodhound 显示点击建议的完整列表答案

【问题标题】：Show full list of suggestions on click with typeahead and bloodhound使用 typeahead 和 Bloodhound 显示点击建议的完整列表
【发布时间】：2014-11-25 22:39:29
【问题描述】：

我正在将 Typeahead.js 与 Bloodhound 建议引擎一起使用，并希望在用户单击搜索框时立即显示该列表。

我发现了这个与我相同的 stackoverflow 问题 (Twitter TypeAhead show all results programmatically)，答案指向解决问题的 jsfiddle：http://jsfiddle.net/5xxYq/

太棒了。

但是，它似乎只有在不使用寻血猎犬作为预输入源时才有效。

例如我分叉了他们的工作示例并将预输入源切换为使用 Bloodhound：http://jsfiddle.net/5xxYq/31/。建议引擎工作正常（当我输入 jo 时，会出现列表），但是让建议在点击时出现的小技巧似乎不再起作用了。

关于如何使用 Bloodhound 使建议列表出现在点击中的任何想法？

谢谢！

【问题讨论】：

标签： javascript jquery typeahead.js bloodhound

【解决方案1】：

如果您将此解决方案与 bloudhound 结合使用，您还需要更改 bloodhound.js 或 bundle.js。

在 typeahead.bundle.js 或 Bloodhound.js 添加找到此代码（第 450 行）

return matches ? _.map(unique(matches), function(id) {
                return that.datums[id];
            }) : [];

如果令牌输入为空，则添加此检查以返回所有建议：

if (tokens == '') return that.datums;

现在看起来像：

if (tokens == '') return that.datums;
return matches ? _.map(unique(matches), function(id) {
                    return that.datums[id];
                }) : [];

我已经在你的小提琴中测试过它并且它有效。

【讨论】：

您好，谢谢 :) 我宁愿避免更改 Bloodhound/bundle.js。您说还有其他解决方案，您是否看到/是否有一个可以回答我的问题且无需修改 bundle.js 的解决方案？
@ibiza 我想我在某个地方找到了一个插件，使这成为可能。但是我再也找不到了，对不起。我将编辑我的答案
好的，谢谢 :) 那我会接受答案。如果您找到了一种无需更改 bundle.js 的简洁方法，请告诉我！
解决方案不会改变stackoverflow.com/questions/23429918/…的核心包

【解决方案2】：

我认为可能有更好的方法来做到这一点。在不改变 Bloodhound/boundle js 的情况下，它仍然取决于可能会改变的内部 Bloodhound 实现。

var searchEngine = new Bloodhound({...});
function searchWithDefaults(q, sync) {
  if (q === '') {
    sync(searchEngine.index.all());
  } else {
    searchEngine.search(q, sync);
  }
}
$("#typeahead").typeahead({
  minLength : 0,
}, {
  name : 'typeahead',
  source : searchWithDefaults
});

此代码利用了名为 SearchIndex 的 Bloodbound 内部搜索引擎及其函数 all() 的实现，该函数返回 Bloodhound 存储的数据的完整列表。

答案灵感来自：

【讨论】：

请注意minLength : 0 是必不可少的。我为此苦苦挣扎了一段时间。