텍스트 필드 자동 완성 - 자동 완성 옵션 내에서만 제출 허용

Question

자동 완성을 허용하는 코드를 찾고 있는데, 지정된 데이터 배열 내에서만 가능합니다. 따라서 자동 완성 배열 내의 데이터 만 입력 할 수 있습니다. 어디서부터 시작해야할지 모르겠습니다.

감사합니다.

Answer 1

jQuery UI Autocomplete을 사용하는 다음 솔루션으로 충분해야합니다. 물론 특정 요구 사항에 따라 약간의 조정이 필요할 수 있습니다.

마크 업 :

<input id="autocomplete"/> 
<br /> 
<input id="submit" type="submit" disabled="disabled"/> 

스크립트 :

var source = ['One', 'Two', 'Three', 'Four']; 

$("input#autocomplete").autocomplete({ 
    source: source, 
    select: function(event, ui) { 
     $("#submit").removeAttr("disabled"); 
    } 
}).keyup(function() { 
    var $parentContext = $(this); 
    var matches = $.grep(source, function(n, i) { 
     return $parentContext.val().toLowerCase() == n.toLowerCase(); 
    }); 
    $("#submit").attr("disabled", !matches.length); 
}); 

데모 : http://jsfiddle.net/karim79/Ezbns/

추가 읽기 :

• http://jqueryui.com/demos/autocomplete/
• http://api.jquery.com/jQuery.grep/