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

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

所以基本上当用户输入没有自动完成选项的查询，即“aaa”时，我希望自动完成function下拉并显示“按’输入’为’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

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

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

Answer 2

我的解决方案部分源于请求者的逻辑。 我在这里发布我的解决方案，希望它可以帮助某人。 基本上我们提出一个术语请求，如果该术语不存在，我们将允许用户点击一个假结果（点击这里添加）。 这样做后，他们会触发添加术语的请求。 在那之后，我们清除自动完成到它的初始状态，并将新创建的术语附加到列出所选术语的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 = '
' + data.value + '
'; $("#localsponsor-div").append(e); $("#upto-localsponsor").val(upto + 1); } } }); $(this).val(''); return false; } else { var upto = parseInt($("#upto-localsponsor").val()); var e = '
' + ui.item.label + '
'; $("#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 $("
") .data("item.autocomplete", item) .append("" + item.label + "") .appendTo(ul); };