jQuery Tag-It – 如何在选择标签时自动显示自动完成列表答案

【问题标题】：jQuery Tag-It – How to automatically display autocomplete list when tag is selectedjQuery Tag-It – 如何在选择标签时自动显示自动完成列表
【发布时间】：2016-08-20 09:15:17
【问题描述】：

我在一个旧的（相当大的）asp.net web-forms 项目中使用 Tag-It、jQuery Auto-Complete 和 jQuery Ajax。

一切都很完美，但在我达到目标之前还需要完成一件事。从自动完成下拉列表中选择标签（单词或单词）后，我想显示一个自动完成列表，其中包含对下一个标签（又是单词或单词）的建议。（手动输入百分号会给我想要的行为，但我的用户不会对那个解决方案感到满意。）

我一直在搜索但没有成功，到目前为止我的所有尝试都失败了。下面提供了我正在使用的代码。我尝试在 afterTagAdded 方法中添加很多不同的东西。当前的尝试是在jquery-ui 1.11.4. 中给我一个“Object expected” 异常

如果有人能指出我正确的方向，将不胜感激。我不是 javascript 和 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();
    });

【问题讨论】：

标签： javascript jquery asp.net jquery-autocomplete tag-it

【解决方案1】：

我设法找到了解决方案，但不确定这是否是正确的方法，谢天谢地，我会采取任何措施。

手动按键盘上的空格键将搜索标签并下拉完成列表。

在Tag-ItafterTagAdded 事件中，我使用jQuery 向Tag-It 创建的输入字段发送空格键击键事件。似乎可以解决问题，至少对于 IE 和 Chrome 的最新版本。

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

【讨论】：