有没有办法关闭typeahead.js的下拉菜单？

Posted 2023-01-30

我正在使用typeahead.js进行打字。

我基本上想要做相反的事情：Programmatically triggering typeahead.js result display

我试图在typeahead上做一个.trigger('blur');，但是我通过做.typeahead('setQuery', value);在此之前设置了值。执行'setQuery'会触发ajax请求，以使用新的查询字词获取结果。因此，“模糊”发生，但此后不久就会打开盒子。

答案

而不是调用setQuery，添加另一个不执行getSuggestions的函数，你将度过一段美好的时光。

另一答案

从版本0.11开始，正确的方法是这样做：

$('.typeahead').typeahead('close');

手册：https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#jquerytypeaheadclose

另一答案

如果有人在将来遇到这种情况，现在最好的方法是：

$('.tt-dropdown-menu').css('display', 'none')

如果你打开Chrome开发者工具并观察输入和删除时会发生什么，这就是Typeahead所做的一切，没有什么神奇之处。

此外，如果您尝试使用当前版本（10.5）来设置查询，您将收到如下错误：

Uncaught TypeError: Cannot assign to read only property 'highlight' of

另一答案

在我的特定情况下，来自typeahead API（typeahead.js@0.11.1）的专用close方法不起作用。也许是因为自定义CSS或我的代码中的一些错误。

虽然other answer中描述的方法通过将display属性设置为none来隐藏菜单，但我需要将其设置回display:block以显示它以供后续使用。此外，它没有使用API​​。

对我来说另一个更好的方法是清除输入的值，以便隐藏下拉列表：

$('.typeahead').typeahead('val', '');

要么

如果您在页面上有多个搜索控件并且您想要定位特定的搜索控件，则$('#place_typeahead_control').typeahead('val', '');。

另一答案

参考：https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md

$('.typeahead-input').typeahead('close');

未记载，但有办法设置前提条件，不允许下拉列表打开：

$('.typeahead-input').on('typeahead:beforeopen', function() 
    return false;
);

另一答案

您可以在“已打开”事件处理程序中触发“模糊”。如果下拉列表闪烁片刻，您可以使用CSS将其隐藏起来进行过渡。