검색어 자동완성 - Autocomplete 초성검색 적용하기(active 파란 배경색 커스텀)

Tag And Script

필요한 CSS , JS 파일

hangul.min.js는 https://github.com/e-/Hangul.js 에서 다운받을수 있습니다.

<link rel="stylesheet" href="//code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>
<script src="/hangul/hangul.min.js"></script>

<style>
.search-box{position: relative; background-color: #f5f5f5; color: #333; padding: 9px; margin: 0 0 10px; font-size: 13px; border: 1px solid #ccc; border-radius: 4px;}
.search-box .btn{border: 1px solid #ccc; margin: 0 3px;}

/* searchInput2 autocomplete active 배경색 */
ul.ui-autocomplete.ul-searchInput2{}
ul.ui-autocomplete.ul-searchInput2 li .ui-menu-item-wrapper{}
ul.ui-autocomplete.ul-searchInput2 li .ui-menu-item-wrapper::after {}
ul.ui-autocomplete.ul-searchInput2 li .ui-menu-item-wrapper.ui-state-active { margin: -1px; border: 1px solid #ccc !important; background: #f0f0f0 !important; font-weight: bold !important; color: #2b2b2b !important; }
</style>

<div class="search-box">
    <input type="text" id="searchInput" class="frm_input" placeholder="검색"/> 
    <button type="button" class="btn btn_search">검색</button>
    autocomplete active 배경색 기본
	<span class="span_searchInput" style="float: right; background:#007cf9; color: #fff; padding: 5px;border: 1px solid #ccc;">자동완성 배경색 <font></font></span>
</div>
<div class="search-box">
    <input type="text" id="searchInput2" class="frm_input" placeholder="검색"/> 
    <button type="button" class="btn btn_search">검색</button>
    autocomplete active 배경색 커스텀
	<span class="span_searchInput2" style="float: right; background: #f0f0f0 color: #2b2b2b; padding: 5px;border: 1px solid #ccc;"><i class="fas fa-search" aria-hidden="true"></i> 자동완성 배경색 <font></font></span>
</div>

<script>
$(function(e) {
	// https://api.jqueryui.com/autocomplete/
	// https://github.com/e-/Hangul.js/
	var koreanRegex = /[ㄱ-ㅎㅏ-ㅣ가-힣]/;
	var autocomplete_search_source = ['html', 'jquery', 'json', '알고리즘', '소스', '소스수정', '태그', '태그수정', '태그추가']; // 자동완성할 데이터 소스. 배열, URL, 함수를 받음.
	//이부분이 초성 검색이 가능하게 만들어 주는 부분
	var autocomplete_search_source_chosung = $.map(autocomplete_search_source, function(item, idx) {
		chosung = '';
		//Hangul.d(item, true) 을 하게 되면 item이 분해가 되어서 
		//["ㄱ", "ㅣ", "ㅁ"],["ㅊ", "ㅣ"],[" "],["ㅂ", "ㅗ", "ㄲ"],["ㅇ", "ㅡ", "ㅁ"],["ㅂ", "ㅏ", "ㅂ"]
		//으로 나오는데 이중 0번째 인덱스만 가지고 오면 초성이다.
		if (koreanRegex.test(item)) { /* 한글이 포함되어 있는지 체크 */ 
			Hangul.d(item, true).forEach(function(strItem, index) {
				if(strItem[0] != " "){	//띄어 쓰기가 아니면
					chosung += strItem[0];//초성 추가
				}
			});
		}
		return {
			label: chosung ? chosung+' | '+item : item, // 실제 검색어랑 비교 대상 : 자동완성창에 표시되는 데이터
			value: item, // 선택했을때 input박스에 입력되는 데이터
			chosung: chosung, // chosung
			idx: idx, // 추가정보
		}
	});
	$('#searchInput').autocomplete({ // autocomplete 구현 시작부
		source : autocomplete_search_source_chosung, //source 는 자동완성의 대상
		select : function(event, ui) { // 항목을 선택했을 때 발생하는 이벤트
			$(this).val(ui.item.value);
			console.log('select : ', ui.item);
		},
		focus : function(event, ui) { // 포커스가 이동할 때 발생하는 이벤트
			console.log('focus : ', ui.item);
			$('.span_searchInput font').html(' : '+ui.item.value);
			return false;
		},
		minLength : 1, // 검색을 시작할 최소 글자수 (기본값: 1)
		autoFocus : true, // true로 설정 시 메뉴가 표시 될 때, 첫 번째 항목에 자동으로 초점이 맞춰짐
		classes : { // 위젯 요소에 추가 할 클래스를 지정( 일반적 'ui-autocomplete' : 'highlight')
			'ui-autocomplete' : 'highlight'
		},
		delay : 500, // 키보드 입력 후 검색까지의 지연 시간(ms) (기본값: 300).
		disable : false, // 해당 값 true 시, 자동완성 기능 꺼짐
		position : { my : 'right top', at : 'right bottom'}, // 제안 메뉴의 위치를 식별
		close : function(event) { // 자동완성 창 닫아질 때의 이벤트
			$('.span_searchInput font').html('');
			console.log('close : ', event);
		}
	}).autocomplete('instance')._renderItem = function(ul, item ) { /* jQuery UI Autocomplete 위젯의 기본 목록 렌더링 방식을 사용자 정의(Customize)할 때 사용하는 핵심 메서드 */
		 return $('<li>')
		.append('<div>'+ item.value+'</div>') /* HTML 커스터마이징 */
		.appendTo(ul); // 웹웹 상으로 보이는 건 정상적인 "소스" 인데 내부에서는 ㅅㅅ | 소스 에서 검색
	};

	var autocomplete_search_source2 = [
		{item_idx: 0, item_name: 'html'}, 
		{item_idx: 1, item_name: 'jquery'}, 
		{item_idx: 2, item_name: 'json'}, 
		{item_idx: 3, item_name: '알고리즘'}, 
		{item_idx: 4, item_name: '소스'}, 
		{item_idx: 5, item_name: '소스수정'}, 
		{item_idx: 6, item_name: '태그'}, 
		{item_idx: 7, item_name: '태그수정'},
		{item_idx: 8, item_name: '태그추가'}
	]; // 자동완성할 데이터 소스

	//이부분이 초성 검색이 가능하게 만들어 주는 부분
	var autocomplete_search_source_chosung2 = $.map(autocomplete_search_source2, function(item, idx) {
		chosung = '';
		//Hangul.d(item.item_name, true) 을 하게 되면 item이 분해가 되어서 
		//["ㄱ", "ㅣ", "ㅁ"],["ㅊ", "ㅣ"],[" "],["ㅂ", "ㅗ", "ㄲ"],["ㅇ", "ㅡ", "ㅁ"],["ㅂ", "ㅏ", "ㅂ"]
		//으로 나오는데 이중 0번째 인덱스만 가지고 오면 초성이다.
		if (koreanRegex.test(item.item_name)) { /* 한글이 포함되어 있는지 체크 */ 
			Hangul.d(item.item_name, true).forEach(function(strItem, index) {
				if(strItem[0] != " "){	//띄어 쓰기가 아니면
					chosung += strItem[0];//초성 추가
				}
			});
		}
		return {
			label: chosung ? chosung+' | '+item.item_name : item.item_name, // 실제 검색어랑 비교 대상 : 자동완성창에 표시되는 데이터
			value: item.item_name, // 선택했을때 input박스에 입력되는 데이터
			chosung: chosung, // chosung
			idx: item.item_idx, // 추가정보
		}
	});
	$('#searchInput2').autocomplete({ // autocomplete 구현 시작부
		source : autocomplete_search_source_chosung2, //source 는 자동완성의 대상  
		select : function(event, ui) { // 항목을 선택했을 때 발생하는 이벤트
			$(this).val(ui.item.value);
			$('ul li.idx-'+ui.item.idx).addClass('active');
			console.log('select : ', ui.item);
		},
		focus : function(event, ui) { // 포커스가 이동할 때 발생하는 이벤트
			console.log('focus : ', ui.item);
			$('.span_searchInput2 font').html(' : '+ui.item.value);
			return false;
		},
		minLength : 1, // 검색을 시작할 최소 글자수 (기본값: 1)
		autoFocus : true, // true로 설정 시 메뉴가 표시 될 때, 첫 번째 항목에 자동으로 초점이 맞춰짐
		classes : { // 위젯 요소에 추가 할 클래스를 지정( 일반적 'ui-autocomplete' : 'highlight')
			'ui-autocomplete' : 'highlight ul-searchInput2'
		},
		delay : 500, // 키보드 입력 후 검색까지의 지연 시간(ms) (기본값: 300).
		disable : false, // 해당 값 true 시, 자동완성 기능 꺼짐
		position : { my : 'right top', at : 'right bottom'}, // 제안 메뉴의 위치를 식별
		close : function(event) { // 자동완성 창 닫아질 때의 이벤트
			$('.span_searchInput2 font').html('');
			console.log('close : ', event);
		}
	}).autocomplete('instance')._renderItem = function(ul, item ) { /* jQuery UI Autocomplete 위젯의 기본 목록 렌더링 방식을 사용자 정의(Customize)할 때 사용하는 핵심 메서드 */
		 return $('<li>')
		.append('<div><i class="fas fa-search" aria-hidden="true"></i> '+ item.value+'</div>') /* HTML 커스터마이징 */
		.appendTo(ul); // 웹웹 상으로 보이는 건 정상적인 "소스" 인데 내부에서는 ㅅㅅ | 소스 에서 검색
	};
});
</script>