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

Question

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

当用户进入一个没有自动完成选项，即“AAA”，我想自动完成向下下降，显示查询“按‘回车’创建‘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键到该标签”时，标签“按回车键创建该标签”就会被创建。我如何解决这个问题的原始查询？

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 = '<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); 
    };