JQuery 自动完成。如果找不到项目，显示“按 Enter 插入自动完成”？

Question

我正在做一种标签自动完成组合。

所以基本上当用户输入一个没有自动完成选项的查询时，即“aaa”，我希望自动完成下拉并显示“Press 'Enter' to create a tag for 'aaa'。”

我在文档上找不到任何东西（我想这需要我做一些黑客攻击，但在这样做之前，我想看看是否有人为此做了补丁。）

编辑：

我已经开始研究源代码，这就是我所拥有的：

 $.ui.autocomplete.prototype._response= function( content ) {
    /* BUG: when the user clicks "Press Enter to this tag", 
     *  the tag "Press enter to create this tag" 
     *  gets created
     */
    console.log(content);
    if (content.length == 0) { 
      content = [{ 'label': "Press Enter to create this tag.", "value": -1 }];
    }

    if ( !this.options.disabled && content && content.length ) {
      content = this._normalize( content );
      this._suggest( content );
      this._trigger( "open" );
    } else {
      this.close();
    }
    this.pending--;
    if ( !this.pending ) {
      this.element.removeClass( "ui-autocomplete-loading" );
    }
  };

这很好用。但是，当用户单击“按 Enter 键进入此标签”时，会创建“按 Enter 键创建此标签”标签。如何将其修复为原始查询？

Answer 1

我的解决方案部分源自请求者的逻辑。我在这里发布我的解决方案，希望它可以帮助某人。基本上我们会请求一个术语，如果该术语不存在，我们将允许用户点击虚假结果（点击此处添加）。这样做后，他们会触发添加该术语的请求。之后，我们将自动完成清除为初始状态，并将新创建的术语附加到列出所选术语的 div 中。我还存储了用户填写表单后要保存的 ID。

  $("#local-sponsor").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: applications.Urls.FindLocalSponsor,
                dataType: "json",
                cache: false,
                data: {
                    term: request.term,
                    alreadyselected: function () {
                        var ids = [];
                        $("#localsponsor-div div.tagButton").each(function () {
                            ids.push($(this).data("id"));
                        });
                        return ids;
                    }
                },
                success: function (data) {
                    if (data.length === 0) {
                        data = [{ 'label': "Click here to create", "value": request.term, "id": -1 }];
                    }
                    response(data);
                }
            });
        },
        minLength: 1,
        select: function (event, ui) {
            if (ui.item.id === -1) {
                $.ajax({
                    url: applications.Urls.AddLocalSponsor,
                    type: 'POST',
                    dataType: "json",
                    cache: false,
                    data: {
                        term: ui.item.value
                    },
                    success: function (data) {
                        if (data.id !== 0) {
                            var upto = parseInt($("#upto-localsponsor").val());
                            var e = '<div class="tagButton" data-id="' + data.id + '">' + data.value + '<a class="remove remove-researcher-co"></a><input type="hidden" name="LocalSponsors[' + upto + ']" id="LocalSponsors' + upto + '_" value="' + data.id + '"/></div>';
                            $("#localsponsor-div").append(e);
                            $("#upto-localsponsor").val(upto + 1);
                        }
                    }
                });
                $(this).val(''); return false;
            } else {
                var upto = parseInt($("#upto-localsponsor").val());
                var e = '<div class="tagButton" data-id="' + ui.item.id + '">' + ui.item.label + '<a class="remove remove-researcher-co"></a><input type="hidden" name="LocalSponsors[' + upto + ']" id="LocalSponsors' + upto + '_" value="' + ui.item.id + '"/></div>';
                $("#localsponsor-div").append(e);
                $("#upto-localsponsor").val(upto + 1);
                $(this).val(''); return false;
            }
        },
        response: function(event, ui) {
        }
    }).data("ui-autocomplete")._renderItem = function (ul, item) {
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.label + "</a>")
            .appendTo(ul);
    };

Answer 2

我不知道您是如何获得自动完成结果的，但例如，如果您在 $.getJSON() 调用中获得它，并根据结果填充组合项目（而不仅仅是给出直接调用控件的结果）您可以检查 result.length == 0，如果是，则将其他内容（例如“按 Enter 键创建”的元素）添加到组合中。

如果您想要更准确的答案，请显示一些代码！