Javascript 로 초성검색하기


어떤 훌륭한 분이 한글을 분리해주는 라이브러리를 맨들어줘서 그분의 라이브러리를 활용한 초성 검색 예제를 만들어 보았다.


라이브러리 : https://github.com/e-/Hangul.js/


검색어 : ex) ㅎㄱ or 한국


    코드

    <!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>
    


    Trackback 0 Comment 0
    prev 1 2 3 4 5 6 7 8 9 ··· 223 next