Invoke AutoComplete dropdown after inserting token in bootstrap tokenfield

Question

I have a small example like on this Fiddle. Simple Bootstrap tokeninput using autocomplete.

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

By default, after selecting a token the input will still be focused, and the autocomplete is only going to auto-popup again if I focus out and in to the input field.

I would like to be able to reopen the autocomplete options once I entered a token.

I was thinking to try using the tokenfield:createtoken event to lose and gain focus of the input again, but that won't give the autocomplete dropdown.

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

Other idea was to try using the search function autocomplete-ui.

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

No luck with that either. Pls Help! Thanks! JSFiddle Here

score 3 · Answer 1 · answered Nov 27 '15 at 05:13

3

Your code does not work, because event is triggered before autocomplete window is closed.

So you need setTimeout to get it working:

Sample on JSFiddle

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

As you see in example, after token was set, autocomplete window is closed and opened again immediately.

answered Nov 27 '15 at 05:13

aeryaguzov

1,143
1
10
21

For a workaround it works better than expected. It still feels like it must be a better solution for this. When the popup opens, the next click will be ingored by autocomplete and just second click will do the selection. – DDan Nov 27 '15 at 05:56
Adding a click after it will set it to work at first click on autocomplete. :) – DDan Nov 27 '15 at 06:02

score 1 · Answer 2 · answered Nov 27 '15 at 06:04

From aeryaguzov's answer with a bit of modification (I needed to add a click to be able to select at first click after it opened) It works fine, but it is still a workaround.

Better solutions are welcome.

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

Fiddle here

Invoke AutoComplete dropdown after inserting token in bootstrap tokenfield

2 Answers2