在引导程序标记字段中插入标记后，调用“自动完成”下拉列表

Invoke AutoComplete dropdown after inserting token in bootstrap tokenfield

本文关键字：下拉列表 自动完成 字段 引导程序 插入 调用      更新时间：2023-09-26

我有一个类似Fiddle的小例子。使用自动完成的简单引导标记输入。

$(document).ready(function() {   
    $('#tokenfield').tokenfield({
      autocomplete: {
        source: ['red','blue','green','yellow','violet','brown','purple','black','white'],
        delay: 100
      },
      showAutocompleteOnFocus: true
    });
});

默认情况下，在选择一个令牌后，输入仍然会被聚焦，只有当我将注意力集中在输入字段时，自动完成才会再次自动弹出。

我希望在输入令牌后能够重新打开自动完成选项。

我想再次尝试使用tokenfield:createtoken事件来丢失和获得输入的焦点，但这不会提供自动完成下拉列表。

$('#tokenfield').on('tokenfield:createtoken', function (e) {
   console.log('FOCUS IN AND OUT');
   $('#tokenfield-tokenfield').blur();
   $('#tokenfield-tokenfield').focus();
});

另一个想法是尝试使用search函数自动完成ui。

$('#tokenfield').on('tokenfield:createtoken', function (e) {
    console.log('TRY AUTOCOMPLETE SEARCH');
    $('#tokenfield-tokenfield').autocomplete('search', '');
});

运气也不好。请帮忙！谢谢JSFiddle此处

您的代码不起作用，因为事件是在自动完成窗口关闭之前触发的。

因此，您需要setTimeout使其工作：

JSFiddle 上的样本

setTimeout(function() {
  $('#tokenfield-tokenfield').blur();
  $('#tokenfield-tokenfield').focus()
}, 0)

正如您在示例中看到的，在设置了令牌之后，自动完成窗口将立即关闭并再次打开。

根据aeryaguzov的回答进行了一些修改（我需要添加一个点击才能在打开后第一次点击时进行选择）它运行良好，但仍然是一种变通方法。

我们欢迎更好的解决方案。

$('#tokenfield').on('tokenfield:createtoken', function (e) {
      setTimeout(function() {
            $('#tokenfield-tokenfield').blur();
            $('#tokenfield-tokenfield').focus();
            $('#tokenfield-tokenfield').click();
      }, 0)
});

Fiddle here

相关文章：