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

Tag And Script

필요한 CSS , 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>

<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 li .ui-menu-item-wrapper{padding: 7px 1em 7px 1.5em;}
ul.ui-autocomplete.ul-searchInput2 li .ui-menu-item-wrapper::after { position:absolute; top: 6.3px; left: 4px; content:"\f002";display:inline-block;font-family:"Font Awesome 5 Free";font-weight: 900; color: #2b2b2b; }
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 배경색 기본
</div>
<div class="search-box">
    <input type="text" id="searchInput2" class="frm_input" placeholder="검색"/> 
    <button type="button" class="btn btn_search">검색</button>
    autocomplete active 배경색 커스텀
</div>

<script>
$(function(e) {
	// https://api.jqueryui.com/autocomplete/
	var autocomplete_search_source = ['html', 'jquery', 'json', '알고리즘', '소스', '소스수정', '태그', '태그수정', '태그추가']; // 자동완성할 데이터 소스. 배열, URL, 함수를 받음.
	$('#searchInput').autocomplete({ // autocomplete 구현 시작부
		source : autocomplete_search_source, //source 는 자동완성의 대상
		select : function(event, ui) { // 항목을 선택했을 때 발생하는 이벤트
			$(this).val(ui.item.value);
			console.log('select : ', ui.item);
		},
		focus : function(event, ui) { // 포커스가 이동할 때 발생하는 이벤트
			console.log('focus : ', ui.item);
			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) { // 자동완성 창 닫아질 때의 이벤트
			console.log('close : ', event);
		}
	});

	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: '태그추가'}
	]; // 자동완성할 데이터 소스
	$('#searchInput2').autocomplete({ // autocomplete 구현 시작부
		source : function(request, response){
			var r = []; //자동완성의 응답값
			var q = request.term; //사용자의 input값
			//배열의 형태가 복잡한 경우, 임의로 필터를 지정
			$.each(autocomplete_search_source2, function(k, v){ 
				if (v.item_name.indexOf(q) != -1) {
					r.push({
						label: v.item_name, // 자동완성창에 표시되는 데이터
						value: v.item_name, // 선택했을때 input박스에 입력되는 데이터
						idx: v.item_idx, // 추가정보
					})
				}
			});
			response(r.slice(0, 10)); //자동완성 최대갯수 제한
		},  
		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);
			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) { // 자동완성 창 닫아질 때의 이벤트
			console.log('close : ', event);
		}
	});
});
</script>