Typeahead总是最多只显示5个建议

Question

我使用Typeahead.js编写了以下代码以获取建议。 我对该代码没有大问题，因为它可以正常工作。

我面临的小问题是，任何时候，即使从远程URL返回了更多建议，我也只能看到5个建议。

var isearch = new Bloodhound({
    datumTokenizer: function(d) { 
         return Bloodhound.tokenizers.whitespace(d.value); 
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: "http://localhost/search/get-data/%QUERY"
});

isearch.initialize();  

$("#search_box .typeahead").typeahead(null,{ name: "isearch",
    displayKey: "value",
    source: isearch.ttAdapter(),
    templates: {
         suggestion: Handlebars.compile("{{value}}")
    }
});

我期望有更多的建议，应该为用户提供滚动条来查看。

- Purus

Answer 1

在 Typeahead 0.11.1 版本中：

在实例化 typeahead 对象时指定 "limit" 来设置要显示的建议数量，例如：

// Instantiate the Typeahead UI
$('.typeahead').typeahead(null, {
 limit: 10, // This controls the number of suggestions displayed
 displayKey: 'value',
 source: movies
});

这里可以看到一个实际的例子：

http://jsfiddle.net/Fresh/ps4w42t4/

---

Typeahead版本为0.10.4。

Bloodhound建议引擎的“limit”选项默认值为五（即Bloodhound#get返回的建议数上限）。

您可以在实例化Bloodhound对象时通过指定所需值来增加限制。例如，要指定限制为10：

var isearch = new Bloodhound({
 datumTokenizer: function(d) { 
     return Bloodhound.tokenizers.whitespace(d.value); 
 },
 queryTokenizer: Bloodhound.tokenizers.whitespace,
 remote: "http://localhost/search/get-data/%QUERY",
 limit: 10
});

下面是限制为10的Typeahead实例示例：

http://jsfiddle.net/Fresh/w03a28h9/

- Ben Smith

---

谢谢提供链接。我已经看过了。我想要的是当有更多项目时，拥有一个滚动条。总限制=10，显示=5个项目。对于剩余的项目，我们应该使用滚动条。 - Purus

好的，很高兴你找到了解决方案。你应该回答自己的问题，以帮助其他遇到同样问题的人。 - Ben Smith

有没有办法无限制地显示建议？ - CJ Ramki

@CJRamki 您可以获取远程数据集的大小，然后在实例化Bloodhound时使用该值。但是，为什么要这样做呢？返回所有数据会减慢页面速度，因为您需要检索所有数据。 - Ben Smith

版本0.11.1 - BloodHound上没有“limit”选项。 “sufficient”是一个选项，但它是用于触发“remote”以回填建议的。如果您正在使用bloodhound + TT，则可以在TT的“dataset”选项中使用“limit”来控制建议。 - aked

Answer 2

在我的情况下，“limit”选项起作用，但使用的方法不同。我不得不将限制选项放在类型提示上而不是Bloodhound上。我发帖分享我的情况，以便可能有所帮助。

bloodhoundSuggestionEngine = new Bloodhound({
datumTokenizer : function(d) {
return Bloodhound.tokenizers.whitespace(d.key);
},
queryTokenizer : Bloodhound.tokenizers.whitespace,
local : myOptions
});

$("#myinputbox").typeahead({
minLength : 3,
highlight : true
}, {
displayKey : 'key',
source : bloodhoundSuggestionEngine.ttAdapter(),
limit: 10
});

- Atul Kumbhar

---

据我所知，自 Bloodhound 的版本 0.11 开始，限制已被删除作为一个选项。我认为仅在 typeahead 中才是一个选项。 - viggity

似乎他们一直在来回更改。 - Andrew Liu

Answer 3

在Typeahead 0.11.1版本中：

在实例化typeahead对象时指定“limit”来设置要显示的建议数量，但确保它比源返回的最大数量少一个。

// Instantiate the Typeahead UI
$('.typeahead').typeahead(null, {
    limit: 9, // one less than your return value. This controls the number of suggestions displayed
    displayKey: 'value',
    source: movies
});

请查看https://github.com/twitter/typeahead.js/issues/1201

- BusyBee

---

第一个 null，对我有用。谢谢！ - COBIZ webdevelopment

Answer 4

除了像@Fresh建议的那样为Bloodhound实例添加限制，我还在CSS中进行了以下样式设置以获得所需的结果。

.tt-suggestions {
  min-height: 300px;
  max-height: 400px;  
  overflow-y: auto;
}

我所做的是强制容器为400像素，这样当有更多的结果时，我可以得到一个滚动条。我选择这种方法是因为我不想让屏幕占用更多的空间。即使有100个结果，这种方法也能正常工作，并且不会阻塞屏幕。

- Purus

Answer 5

另一种方法可能是直接更改Typeahead类中的默认值。 $.fn.typeahead.defaults = { ... items: 8, ...} 更改为 items: 'all'

- argoden

Answer 6

@Atul的回答确实帮了我，但我还有另一个关于Bloodhound的相关问题。我正在使用远程，并且我将无法得到我知道遥控器将提供的结果。这是因为它在Bloodhound缓存中找到了足够接近的内容，并没有向远程请求数据。所以通过将Bloodhound的sufficient选项从默认值提高到100，它总是请求更多的数据。

- viggity