JQuery 자동 완성. 항목을 찾을 수없는 경우 "Enter 키를 눌러 자동 완성에 삽입"이라고 표시됩니까?

Question

나는 태그 자동 완성 콤보 (tag-autocomplete combo)를하고있다.

그래서 기본적으로 사용자가 내가 자동 완성 드롭 다운을 표시하려면, 어떤 자동 완성 옵션, 즉 "AAA"를이없는 쿼리를 입력하면 "보도 'AAA'에 대한 태그를 생성하는 '입력'을."

I을

내가 시작했다 : 워드 프로세서에서 아무것도 (. 나는이 몇 가지 해킹을 할 저를 필요로한다고 가정하지만, 그렇게하기 전에, 나는 누군가가 이것에 대한 패치를 할 경우보고 싶어)

가 편집 찾을 수 없습니다 소스 코드에 대한 작업은 이것이 가지고있는 것입니다 :

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