Question

我使用Typeahead.js获得以下代码以获取建议。我没有关于代码的重大问题，因为它工作正常。

我面临的一个小问题是，在任何给定时间内，即使远程网址中有超过5条建议，我也只会看到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}}")
    }
});

我的期望是有更多建议，应该有一个滚动条供用户查看。

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建议引擎的“限制”选项默认值为5（即The max number of suggestions to return from 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/

Answer 2

在我的情况下，限制＆＃39;选项工作但以不同的方式。我不得不把限制选项放在typeahead而不是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
});

Answer 3

除了添加@Fresh建议的Bloodhound实例化限制外，我在CSS中使用了以下样式来获得所需的结果。

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

我所做的是将容器强制为400px，以便在有更多结果时获得滚动条。我想要这种方法因为，我不希望屏幕占用更多区域。即使有100个结果，这也会有效。并且不会阻止屏幕。

Answer 4

另一种方法可能是直接更改Typeahead类中的默认值。

$.fn.typeahead.defaults = { ... items: 8, ...}

到

items: 'all'

Answer 5

在Typeahead版本0.11.1中：

在实例化预输入对象的过程中指定“限制”以设置显示的建议数，但请确保该建议数比源返回的最大数少。

// 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

Answer 6

@Atul的答案肯定对我有帮助，但我还有另一个与猎犬有关的问题。我正在使用遥控器，我不会得到我知道遥控器可以服务的结果。这是因为它在血腥缓存中找到了足够接近的东西，并没有向遥控器询问数据。因此，通过将Bloodhound上的get_page_count()选项从默认值提高到100，它总是要求远程数据库获取更多数据。

Typeahead始终只显示5个建议

6 个答案: