[jQuery] Autocomplete 사용법, 예제, 옵션 (자동완성 기능)

jQuery Autocomplete는 입력 필드를 자동 완성 기능으로 확장하는 jQuery 플러그인입니다. 사용자가 입력하는 동안 텍스트 박스 아래에 미리 보기 목록이 나타나며, 사용자가 선택하면 선택한 값을 입력 필드에 자동으로 채워집니다.
사용자가 항목을 수동으로 검색하고 선택해야 하는 경우보다 더욱 빠르고 쉽게 필요한 값을 찾을 수 있습니다.

 

<script>
$(function(){
	var list= new Array();
	var mydata = [
		{noodles:"진라면",  noodles_type:"매움",noodles_amt:"100원",  noodles_company:"회사1", idx:"1"},   
		{noodles:"신라면",  noodles_type:"약간매움",	noodles_amt:"500원",  noodles_company:"회사2", idx:"2"},
		{noodles:"열라면",  noodles_type:"아주매움",	noodles_amt:"1500원", noodles_company:"회사3", idx:"3"},
		{noodles:"안성탕면", noodles_type:"안매움",	noodles_amt:"1200원", noodles_company:"회사4", idx:"4"},
		{noodles:"짜파게티", noodles_type:"전혀맵지않음",	noodles_amt:"2000원", noodles_company:"회사5", idx:"5"}
	];				  
    $.each(mydata, function (index, item) {
        var row = new Object();
        row.value = item.noodles_type;
        row.label = item.noodles;
        row.noodles_type = item.noodles_type;
        row.noodles_amt = item.noodles_amt;

        list.push(row);

    });


    $("#view_list" ).autocomplete({
        source: list,
        focus: function( event, ui ) {
            $( "#view_list" ).val( ui.item.label );
            return false;
            },
            select: function( event, ui ) {
              $("#view_list" ).val( ui.item.label );
              $("#view_list-id" ).val( ui.item.value );
              $("#view_list-description" ).html( ui.item.noodles_type );
              $("#view_list-description2" ).html( ui.item.noodles_amt );

			  alert('선택');

              return false;
            }
        }).autocomplete( "instance" )._renderItem = function( ul, item ) {
          return $("<li>").append( "<div style='border-bottom: 1px dotted;'>" + item.label + "<br>" + item.noodles_type + "<br>" + item.noodles_amt + "</div>" ).appendTo(ul);
        };
});
</script>
<input type="text" id="view_list" name="param" placeholder="라면을 입력해주세요">

 

위의 코드는 #view_list라는 ID를 가진 입력 필드를 자동완성 기능으로 동작시키는 코드입니다.

ㅇ source 속성값으로 list 배열이 할당됩니다. 이렇게 지정된 데이터를 기반으로 자동완성 기능이 동작합니다.

ㅇ focus 이벤트는 자동완성 목록에서 특정 항목에 포커스 되었을 때 발생하는 이벤트입니다.

    이 이벤트에서는 해당 항목의 label 값을 입력 필드에 출력하도록 합니다.

ㅇ select 이벤트는 자동완성 목록에서 특정 항목을 선택했을 때 발생하는 이벤트입니다. 이 이벤트에서는 선택된 항목의 label, value, noodles_type, noodles_amt 값을 각각의 엘리먼트에 출력하도록 합니다.

ㅇ _renderItem 함수는 자동완성 목록에서 각각의 항목을 출력하기 위한 함수입니다. 이 함수에서는 <li> 태그를 생성하고, 그 안에 label, noodles_type, noodles_amt 값을 포함한 HTML을 출력합니다.

소스코드 결과