jQuery Tag-It – How to automatically display autocomplete list when tag is selected

Question

I'm using Tag-It, jQuery Auto-Complete and jQuery Ajax in an old (pretty large) asp.net web-forms project.

Everything works perfectly but one more thing needs to be accomplished before I reached my goal. As soon a tag (word or words) is selected from the autocomplete dropdown, I would like to display an autocomplete list containing suggestions for the next tag (again word or words). (Manually entering a percent sign gives me the behavior I want but my users wouldn't be happy with that solution.)

I’ve been searching without success and all my attempts so far have failed. The code I'm using is supplied below. I've tried putting lots of different stuff in the afterTagAdded method. The current attempt is giving me an “Object expected” exception in jquery-ui 1.11.4.

Most grateful if anyone can point me in the right direction. I’m not an expert on javascript nor jQuery.

    $(document).ready(function () {
        var currentlyValidTags = [];

        $(".TagItInput").tagit({
            autocomplete: {
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        url: "AutoCAdvTest3.aspx/GetTexts",
                        data: JSON.stringify({ text: request.term, tags: $(".TagItInput").tagit("assignedTags") }),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (msg) {
                            currentlyValidTags = msg.d;
                            response(msg.d);
                        }
                    });
                },
                minLength: 0
            },
            beforeTagAdded: function (event, ui) {
                // Only allow tags from the completion list
                if ($.inArray(ui.tagLabel, currentlyValidTags) == -1) {
                    return false;
                }
            },
            afterTagAdded: function (event, ui) {
                // without this line I get an error saying that AutoComplete is not initialized
                $(".TagItInput").autocomplete();
                // but.... Search method fails anyway
                $(".TagItInput").autocomplete("search", "%");
            },
        });

        $(".ui-autocomplete-input").focus();
    });

Answer 1

I managed to find a solution, but not sure if it is the right approach and will thankfully take any comments on that.

Manually hitting spacebar on the keyboard will search for tags and drop down the completion list.

In the the Tag-It afterTagAdded event I’m using jQuery to send a spacebar keystroke event to the input field created by Tag-It. Seems to do the trick, at least for late versions of IE and Chrome.

            afterTagAdded: function (event, ui) {
                var e = $.Event("keydown", { keyCode: 32 });
                $(".ui-autocomplete-input").trigger(e);
            },