Calling the autocomplete drop-down list after inserting a marker in the bootstrap token field

Question

I have a small example like Fiddle . Simple boot token 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 autofill will automatically pop up again if I focus in the input field.

I would like to be able to re-open the autocomplete options after entering the token.

I thought to try using the event tokenfield:createtokento lose and get the input focus again, but this will not give an autocomplete drop-down list.

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

Another idea was to try using the searchautocomplete-ui function .

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

No luck with that either. Help Pls! Thank you JSFiddle Here

Answer 1

, .

, setTimeout, :

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)
});