스토브 훌로구

Javascript 로 초성검색하기

Javascript 예제 2018. 6. 26. 13:25

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

라이브러리 : 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>

저작자표시 비영리 변경금지

'Javascript 예제' 카테고리의 다른 글

jQuery 로 탭 만들어 보기 (0)	2018.10.12
jQuery 로 탭메뉴를 맹글어 보아요~ (8)	2014.10.15
네이버맵 커스텀 컨트롤(CustomControl) 버튼 지도에 추가하기 (0)	2014.04.29
jQuery 로 탭메뉴 보였다 안보였다 맹글기 (3)	2014.04.10
jQuery로 Outer HTML 가져오기 (2)	2012.11.06