검색어 자동완성 - jQuery Autocomplete 한글 초성 검색 1 - 삽질중인 개발자

-jQuery Autocomplete 한글 초성 검색-

 

jQuery UI의 autocomplete 는 영어대한 검색은 잘된다. but, 한글의 경우 초성만 입력했을 때 자동완성이 안된다.

 

한글 초성검색을 구현하는 방법중에는 DB에서부터 초성검색을 하는 방법이 있지만 DB 쿼리문을 수정 할 수 없는 경우에는 DB 초성 검색 구현이 불가능하다.

 

DB에서 초성검색 쿼리 구현이 불가능한 경우 autocomplete에서 초성검색을 구현하는 방법입니다.

​참고로 꼼수를 쓴 방법입니다.

​

읽기 전에 추천 검색어가 몇 천만개 되는 사람은 뒤로가기를 눌러주세요.

 

autocomplete의 옵션을 잘 모르시는 분은 한번 읽고 와주세요.

검색어 자동완성 - jQuery Autocomplete 사용법

 

준비 사항

깃허브에 있는 한글 자음/모음 분리/조합 자바스크립트 라이브러리를 다운 받습니다.

e-/Hangul.js

깃허브에 있는 사용방법도 한번 읽고 와주세요.

 

 

1. 필요한 JS ,CSS 파일 로드

<!-- 필요한 CSS, JS 로드 -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<!-- 저 같은 경우는 webapp 안에 resouces 폴더 안에 js 안에 plugin 안에 hangul 안에 hangul.js 이 있습니다. -->
<script type="text/javascript" src="resources/js/plugin/hangul/hangul.js"></script>

 

2. 초성 검색 구현 방법

이 꼼수에서 가장 중요한 점은 우선 ajax로 미리 DB에 있는 검색어 목록을 가지고 오는 것이다.

즉, 너무 많은 검색어 목록이 있는 경우 엄청나게 느리다는 것이다.

주식 종목으로 3000개 정도 해봤는데 티도 안나는 것 보니까 어느 정도 데이터까지는 가능할 것 같아요.

주석에 설명을 달아놨습니다.

 

<script>
	$(function() { //화면 다 뜨면 시작
		//DB쿼리 조작 없이 초성 검색을 하기 위해서는 우선 DB에 있는 항목들을 다 가지고 와야한다.
		//즉 너무 많은 수가 있으면 클라이언트 측이 느려질 수 있다는 점.
		//하지만 DB쿼리를 조작해서 서버에서 초성검색을 하는 방식에 비해 서버에는 무리가 없다.
		// ajax로 미리 검색어 목록을 다 가지고 온다.
		$.ajax({
			type : 'get',
			url : "/json",
			dataType : "json",
			//request.term = $("#autocomplete").val()
			//data: {"param":"param"},
			success : function(data) {
				//현재 data 상태
				//data = ["김치 볶음밥","신라면","진라면","라볶이","팥빙수","너구리","삼양라면","안성탕면","불닭볶음면","짜왕","라면사리"];
				
				//이부분이 초성 검색이 가능하게 만들어 주는 부분
				let source = $.map(data, function(item) { //json[i] 번째 에 있는게 item 임.
					chosung = "";
					//Hangul.d(item, true) 을 하게 되면 item이 분해가 되어서 
					//["ㄱ", "ㅣ", "ㅁ"],["ㅊ", "ㅣ"],[" "],["ㅂ", "ㅗ", "ㄲ"],["ㅇ", "ㅡ", "ㅁ"],["ㅂ", "ㅏ", "ㅂ"]
					//으로 나오는데 이중 0번째 인덱스만 가지고 오면 초성이다.
					Hangul.d(item, true).forEach(function(strItem, index) {
						if(strItem[0] != " "){	//띄어 쓰기가 아니면
							chosung += strItem[0];//초성 추가
						}
					});
					return {
						label : chosung + "|" +item, //실제 검색어랑 비교 대상 ㄱㅊㅂㅇㅂ|김치 볶음밥 이 저장된다.
						value : item, //김치 볶음밥
						chosung : chosung	//ㄱㅊㅂㅇㅂ
					}
				});
				
				
				$("#searchInput").autocomplete({
					source : source,	// source 는 자동 완성 대상
					select : function(event, ui) {	//아이템 선택시
						console.log(ui.item.label + " 선택 완료");	
						
					},
					focus : function(event, ui) {	//포커스 가면
						return false;//한글 에러 잡기용도로 사용됨
					}
				}).autocomplete( "instance" )._renderItem = function( ul, item ) {	
				//.autocomplete( "instance" )._renderItem 설절 부분이 핵심
			      return $( "<li>" )	//기본 tag가 li로 되어 있음 
			        .append( "<div>" + item.value + "</div>" )	//여기에다가 원하는 모양의 HTML을 만들면 UI가 원하는 모양으로 변함.
			        .appendTo( ul );	//웹 상으로 보이는 건 정상적인 "김치 볶음밥" 인데 내부에서는 ㄱㅊㅂㅇㅂ,김치 볶음밥 에서 검색을 함.
			    };
			}
		});

	});
</script>

 

이 방법을 사용하면 다음과 같이 정확한 단어로 써도 검색이 되고 초성만 써도 검색이 가능합니다.

 

초성검색 & 전체 단어 검색

하지만 이 방법은 초성중성종성 검색은 불가능하다. ex) "김치 보" 까지 쓰면 목록에서 안보인다.

사진과 같이 자동완성이 안된다.

-> 초중종성으로 검색하기 구현 방법 링크

jQuery autocomplete 한글 초성 검색 2 - 개발자 삽질 일기