Hide autocomplete box in Tag-it

Question

I have a tagit element on my page:

$("#myTags").tagit({
    fieldName: "tags",
    availableTags: availableTags,
    showAutocompleteOnFocus: true,
    allowSpaces: true
});

When I add a tag using this code:

$("#myTags").tagit("createTag", tag);

the autocomplete box pops up and just hides when I click on the input and then click outside!

I've tried to simulate this by code, but nothing happens:

$(".ui-widget-content.ui-autocomplete-input").focus().blur();

score 1 · Answer 1 · answered Jan 26 '17 at 22:40

I had this issue too and finally found a solution!

var tagElement = $("#myTags").tagit({
    fieldName: "tags",
    availableTags: availableTags,
    allowSpaces: true,

    /* you need to set these three options hide autocomplete after setting a tag */
    showAutocompleteOnFocus: true,
    beforeTagAdded: function (event, ui) {
        // turn autocomplete off
        tagElement.tagit('option', 'showAutocompleteOnFocus', false);
    },
    afterTagAdded : function(event, ui) {
        // turn autocomplete back on
        setTimeout(function () { tagElement.tagit('option', 'showAutocompleteOnFocus', true); }, 5);
    }
});

This works because the tagit code is setup to automatically show the autocomplete after a tag has been added if you have the showAutocompleteOnFocus option set to true. So, we momentarily set it to false then 5 milliseconds later, we turn it back on.

Hide autocomplete box in Tag-it

1 Answers1