어떤 훌륭한 분이 한글을 분리해주는 라이브러리를 맨들어줘서 그분의 라이브러리를 활용한 초성 검색 예제를 만들어 보았다.
라이브러리 : https://github.com/e-/Hangul.js/
<!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>