Question

我在这个Fiddle上有一个小例子。使用自动完成功能的简单Bootstrap令牌输入。

$(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函数autocomplete-ui。

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

也没有运气。请帮忙！谢谢！ JSFiddle Here

Answer 1

您的代码无效，因为在自动完成窗口关闭之前会触发事件。

所以你需要 setTimeout 才能让它运转起来：

Sample on JSFiddle

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

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

Answer 2

从aeryaguzov的回答中做了一些修改（我需要添加一个点击，以便在打开后第一次点击时选择）它工作正常，但它仍然是一种解决方法。

欢迎更好的解决方案。

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

Fiddle here

在引导令牌字段中插入令牌后调用AutoComplete下拉列表

2 个答案: