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

Posted 2023-05-07

【中文标题】Typeahead 总是最多只显示 5 个建议

【英文标题】：Typeahead always shows only 5 suggestions maximum

【发布时间】：2014-07-21 19:31:38

【问题描述】：

我有下面的代码使用 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")
    
);

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

【参考方案1】：

在 Typeahead 0.11.1 版中：

在预输入对象的实例化期间指定“限制”以设置要显示的建议数量，例如

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

【讨论】：

感谢您的链接。我已经看到了。我想要的是当有更多项目时有一个滚动条。总限制 = 10 并且显示 = 5 项。对于剩余的项目，我们应该使用滚动条。

你所期望的不是 typeahead 实现的。我的回答将允许您增加计数，这是您目前实现这一目标的唯一方法。

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

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

版本 0.11.1 - limit 不是 BloodHound 的选项。 sufficient 是一个选项，但这是用于触发 remote 以回填建议。如果您使用 Bloodhound + TT，请在 TT 'dataset` 选项中使用 limit 来控制建议

【参考方案2】：

在我的情况下，“限制”选项有效，但方式不同。我不得不在 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
);

【讨论】：

IIRC，从 Bloodhound 的 0.11 开始，限制作为选项被删除。我认为只是提前输入的一个选项

似乎他们一直在来回改变它

【参考方案3】：

在 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

【讨论】：

第一个 null 是为我做的。谢谢！

【参考方案4】：

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

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

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

【参考方案5】：

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

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

到

items: 'all'

【参考方案6】：

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