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

Is there a way to close the dropdown menu for typeahead.js?

本文关键字：js 下拉菜单 typeahead 有没有      更新时间：2023-09-26

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

我基本上想做相反的事情：用程序触发typeahead.js结果显示

我曾尝试在typeahead上执行.trigger('blur');，但在此之前我通过执行.typeahead('setQuery', value);设置了值。执行"setQuery"会触发ajax请求，以获取具有新查询项的结果。所以"模糊"发生了，但盒子很快就打开了。

正确的方法，从0.11:版本开始

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

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

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

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

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

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

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

$('.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）中的专用关闭方法不起作用。也许是因为自定义CSS或者我代码中的一些错误。

虽然在另一个答案中描述的通过将display属性设置为none来隐藏菜单的方法奏效了，但我需要将其设置回display:block，以将其显示出来供后续使用。此外，它没有使用API。

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

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

或

$('#place_typeahead_control').typeahead('val', '');，以防页面上有多个搜索控件，并且您希望针对特定的一个。

您可以在"打开"的事件处理程序中触发"blur"。如果下拉框闪烁了一段时间，您可以使用CSS将其隐藏起来。

不要调用setQuery，而是添加另一个不执行getSuggestions的函数，这样会玩得很开心。

相关文章：