라이브러리
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")
});
*/
});