jQuery 자동 완성 실시간에 값 추가하기

Question

자동 완성 기능을 가진 "토큰 입력"스타일 체크 박스를 만들고 있습니다. 사용자가 뭔가를 입력하고 응답을 선택하면 DOM보기에 "토큰"이 추가됩니다.

jQuery 자동 완성을 사용하면 사용자가 입력 한 후 source 목록에없는 값을 추가 할 수 있습니까?

예를 들어 소스는 ["Apples", "Oranges", "Bananas"]입니다. 텍스트 필드를 사용할 때 사용자는 "plums,"을 입력합니다. 사용자가 원하는 경우 소스 목록에 "매화"를 추가하는 방법이 있습니까? 확인할 수있는 select 및 change 이벤트가 있다는 것을 알고 있지만 select은 선택할 항목이있는 경우에만 작동하며이 경우에는 change에 사용자가 입력을 중지했는지 확인하기 위해 일종의 시간 초과 검사가 필요합니다.

반대로,이 동작을 수행하는 데 사용할 수있는 또 다른 플러그인이 있습니까?

Answer 1

autocomplete 님의 change 이벤트와 일치해야합니다. 이 코드는 목록에 새 항목을 추가 할 때 표시되는 ID가 add 인 버튼이 있다고 가정합니다. 사용자가 목록에서 항목을 선택하면 나타나지 않습니다. 이 할 수있는 몇 가지 개조하면 되겠 어이 있지만 개념의 증명이 가능해야한다 :

var source = ["Apples", "Oranges", "Bananas"]; 

$(function() { 
    $("#auto").autocomplete({ 
     source: function (request, response) { 
      response($.ui.autocomplete.filter(source, request.term)); 
     }, 
     change: function (event, ui) { 
      $("#add").toggle(!ui.item); 
     } 
    }); 

    $("#add").on("click", function() { 
     source.push($("#auto").val()); 
     $(this).hide(); 
    }); 
}); 

다음은 예입니다 : http://jsfiddle.net/rmGqB/

---

업데이트 : 약간 요구 사항을 오해처럼는 소리. 또한 자동 완성과 후보 목록을 채우는 것, 그 결과 활용 및 검색 결과는 어떤 정확히 일치 굴복 여부에 따라 버튼의 가시성을 구동 할 수 있습니다 :

var source = ["Apples", "Oranges", "Bananas"]; 

$(function() { 
    $("#auto").autocomplete({ 
     source: function (request, response) { 
      var result = $.ui.autocomplete.filter(source, request.term); 

      $("#add").toggle($.inArray(request.term, result) < 0); 

      response(result); 
     } 
    }); 

    $("#add").on("click", function() { 
     source.push($("#auto").val()); 
     $(this).hide(); 
    }); 
}); 

예 :http://jsfiddle.net/VLLuJ/

을

Answer 2

Andrew가 제공 한 대답은 사용자가 "new"를 추가하는 대신 배열에서 기존 항목을 선택하더라도 ADD NEW 단추가 남아있게합니다 !!!

'추가'버튼에 ​​토글을 포함하는 대신 자동 완성 내에 내장 된 .change 기능을 사용할 수 있습니다.

텍스트 상자에 포커스가 없어 질 때까지 "변경"을 기다리지 만 배열에 일치하지 않는 경우 ADD BUTTON을 표시하는 데 더 좋은 인터페이스가 될 수 있습니다. (또는 추가의 "확인"을 만들 수 있음).

사용자가 배열에서 선택한 경우 실제로 "추가 버튼"을 숨기는 대체 코드를 참조하십시오. 세터를 사용

가 자동 완성 소스를 업데이트하려면 : - : 앤드류 휘태커의 솔루션을하지 않는 뭔가 http://jsfiddle.net/VLLuJ/25/

Answer 3

오래된 질문,하지만 유용한 답변

$(function() { 

    var source = ["Apples", "Oranges", "Bananas"]; 

    $("#auto").autocomplete({ 
    source: function (request, response) { 
     var result = $.ui.autocomplete.filter(source, request.term); 


     response(result); 
    }, 
    change: function(event, ui) { 
     var $label = $(this); 
     // figure out the id of hidden input box from label id 
     var $id = $('#'+this.id.replace('label_','id_')); 
     if (ui.item === null && $label.val() != ''){ 
     $("#add").show();    
     } 
     if(ui.item != null && $label.val() != ''){ 
     $("#add").hide();    
     } 
    } 
    }); 

    $("#add").on("click", function() { 
    source.push($("#auto").val()); 
    $(this).hide(); 
    }); 

}); 

작업에서 내 개정 바이올린을 참조하십시오

$ ("# auto").자동 완성 ("옵션", "소스", [ "사과", "오렌지", "바나나", "매화"]);

는 http://api.jqueryui.com/autocomplete/#option-source