라이브러리

autocomplete

현재 버전: 1.13.0 https://jqueryui.com/autocomplete/
※ 예시: 돼지고기, 소고기, 양고기, 삼겹살, 살치살, 등심, 안심, 항정살

html

<input type="text" placeholder="검색어를 입력해 주세요." class="js-autocomplete">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script src="https://unpkg.com/hangul-js" type="text/javascript"></script>

script

function autocomplete(target, data) {
	$(target).autocomplete({
		source: $.map(data, function(item) { // 초성 검색 가능하도록 함수 설정
			chosung = "";
	
			Hangul.d(item, true).forEach(function(strItem, index) {
				if(strItem[0] != " "){ //띄어 쓰기가 아니면
					chosung += strItem[0]; //초성 추가
				}
			});
	
			return {
				label : chosung + "-" + item,
				value : item,
				chosung : chosung
			}
		}),
		focus : function(event, ui) { // 자동 선택 방지
             return false;
        },
		autoFocus:true, // 목록의 첫번째 아이템으로 자동 포커스 true: 포커스 됨 / false: 포커스 안됨
		classes: {
			"ui-autocomplete": "autocomplete-box" // 클래스 추가할 영역과 추가할 클래스 이름 설정
		}
	}).data("ui-autocomplete")._renderItem = function( ul, item ) { // 목록의 아이템을 다시 그려줌 (초성검색 때문)
		return $( "<li>" )
		.data( "ui-autocomplete-item", item )
		.append( "<a href='javacript:void(0);''>" + item.value + "</a>" )
		.appendTo( ul );
	};
}
     
$(function () {
	const data = ["돼지고기", "소고기", "양고기", "삼겹살", "살치살", "등심", "안심", "항정살"];
         	
	// target:자동검색 input / data: 검색할 단어
	autocomplete(".js-autocomplete", data); 
         	
	/*
		// 자동완성 목록이 닫혔을 경우
	   	$( ".js-autocomplete" ).on( "autocompleteclose", function( event, ui ) {
	   		console.log("close")
	  	});
	
		// 자동완성 목록이 열렸을 경우
	   	$( ".js-autocomplete" ).on( "autocompleteopen", function( event, ui ) {
	   		console.log("open")
	  	});
	
		// 자동완성 목록의 아이템 선택했을 경우
	   	$( ".js-autocomplete" ).on( "autocompleteselect", function( event, ui ) {
	   		console.log("select")
	  	});
	*/
});