어떤 훌륭한 분이 한글을 분리해주는 라이브러리를 맨들어줘서 그분의 라이브러리를 활용한 초성 검색 예제를 만들어 보았다.
라이브러리 : https://github.com/e-/Hangul.js/
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script type="text/javascript" src="./hangul.min.js"></script></head><body> 검색어 : <input type="text" id="txt" /> <ul id="find"></ul> <script> // 검색할 배열 var arr = [ { name: "홍길동" }, { name: "한국" }, { name: "호가든" }, { name: "프로그램목록" }, { name: "프로세스" }, { name: "공통" }, { name: "아키텍쳐" }, { name: "앙칼지다" }, { name: "학사행정" }, { name: "일반부속" }, { name: "학습 및 취업" }, { name: "테이블정의서" }, { name: "테이저건" }, { name: "정의서" }, { name: "현행화" }, { name: "졸업" }, { name: "바인더" }, { name: "대학본부" }, { name: "에디터" }, { name: "Visual Studio Code" }, { name: "Edit Plus" }, { name: "소나무" }, { name: "민들레" }, { name: "나뭇가지" }, { name: "갑천" }, { name: "한강" }, { name: "금강" }, { name: "도안동" }, { name: "월평동" }, { name: "대전광역시" }, { name: "서울" }, { name: "경기도" }, { name: "성남시" }, { name: "모니터" }, { name: "이클립스" }, { name: "탐색기" }, { name: "엑셀" }, { name: "크롬" }, { name: "파이어폭스" }, { name: "텔레그램" }, { name: "팟플레이어" }, { name: "마이크로소프트" }, { name: "애플" }, { name: "LG" }, { name: "삼성" }, { name: "오라클" }, { name: "MySQL" }, { name: "치약" }, { name: "프린터" }, { name: "레이저 프린터" }, { name: "아반떼" }, { name: "베라크루즈" }, { name: "자동차공학과" }, { name: "기아자동차" }, { name: "현대자동차" }, { name: "에어컨" } ]; // object 에 초성필드 추가 {name:"홍길동", diassembled:"ㅎㄱㄷ"} arr.forEach(function (item) { var dis = Hangul.disassemble(item.name, true); var cho = dis.reduce(function (prev, elem) { elem = elem[0] ? elem[0] : elem; return prev + elem; }, ""); item.diassembled = cho; }); console.log(arr); var ul = document.getElementById('find'); document.getElementById('txt').addEventListener('keyup', function () { while (ul.firstChild) { ul.removeChild(ul.firstChild); } var search = this.value; var search1 = Hangul.disassemble(search).join(""); // ㄺ=>ㄹㄱ arr // 문자열 검색 || 초성검색 .filter(function (item) { return item.name.includes(search) || item.diassembled.includes(search1); }) // 검색결과 ul 아래에 li 로 추가 .forEach(function (item) { var li = document.createElement('li'); li.innerHTML = item.name; ul.appendChild(li); }); }); </script></body></html> |
