Typeahead始终只显示5个建议

Question

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

我面临的一个小问题是,在任何给定时间内,即使远程URL中有超过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(即从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

在我的情况下,'limit'选项有效,但方式不同.我不得不把限制选项放在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

在 Typeahead 0.11.1 版中：

在 typeahead 对象的实例化期间指定“limit”以设置要显示的建议数量，但要确保它比您的源返回的最大数量少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 4

除了按照@Fresh 的建议添加对 Bloodhound 实例化的限制之外，我还在 CSS 中执行了以下样式以获得所需的结果。

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

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