위토즈 - 개발자프로그램판매공간

정보공유

[JQUERY] 비동기식으로 초성 버튼 클릭 보여주기

작성자
위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물
작성일
25-05-13 10:30
조회수
1,302 건
댓글
0 건
목록


<ul class="btn-group-list">

    <li><input type="button" value="전체" onclick="filterByChosung('all');"></li>

    <li><input type="button" value="ㄱ" onclick="filterByChosung('ㄱ');"></li>

    <li><input type="button" value="ㄴ" onclick="filterByChosung('ㄴ');"></li>

    <li><input type="button" value="ㄷ" onclick="filterByChosung('ㄷ');"></li>

    <li><input type="button" value="ㄹ" onclick="filterByChosung('ㄹ');"></li>

    <li><input type="button" value="ㅁ" onclick="filterByChosung('ㅁ');"></li>

    <li><input type="button" value="ㅂ" onclick="filterByChosung('ㅂ');"></li>

    <li><input type="button" value="ㅅ" onclick="filterByChosung('ㅅ');"></li>

    <li><input type="button" value="ㅇ" onclick="filterByChosung('ㅇ');"></li>

    <li><input type="button" value="ㅈ" onclick="filterByChosung('ㅈ');"></li>

    <li><input type="button" value="ㅊ" onclick="filterByChosung('ㅊ');"></li>

    <li><input type="button" value="ㅋ" onclick="filterByChosung('ㅋ');"></li>

    <li><input type="button" value="ㅌ" onclick="filterByChosung('ㅌ');"></li>

    <li><input type="button" value="ㅍ" onclick="filterByChosung('ㅍ');"></li>

    <li><input type="button" value="ㅎ" onclick="filterByChosung('ㅎ');"></li>

</ul>

<div id="wrap-group-list">

    <span data-word="국민은행"><input type="checkbox" name="vg_ix[]" value="81" id="vg_ix_0"><label for="vg_ix_0"> 국민은행</label></span>

    <span data-word="하나은행"><input type="checkbox" name="vg_ix[]" value="82" id="vg_ix_1"><label for="vg_ix_1"> 하나은행</label></span>

    <span data-word="카카오뱅크"><input type="checkbox" name="vg_ix[]" value="84" id="vg_ix_2"><label for="vg_ix_2"> 카카오뱅크</label></span>

</div>



<script type="text/javascript">
<!--
    function filterByChosung(chosung) {
        $('#wrap-group-list span').hide(); // 전체 숨기기

        if (chosung === 'all') {
            $('#wrap-group-list span').show(); // 전체 보이기
            return;
        }

        $('#wrap-group-list span').filter(function () {
            const word = $(this).data('word');
            if (!word || word.length === 0) return false;

            const firstChar = word.charAt(0);
            return getChosung(firstChar) === chosung;
        }).show(); // 초성이 일치하는 것만 보이기
    }
    function getChosung(char) {
        const CHOSUNG_LIST = [
            "ㄱ", "ㄲ", "ㄴ", "ㄷ", "ㄸ", "ㄹ",
            "ㅁ", "ㅂ", "ㅃ", "ㅅ", "ㅆ", "ㅇ",
            "ㅈ", "ㅉ", "ㅊ", "ㅋ", "ㅌ", "ㅍ", "ㅎ"
        ];

        const code = char.charCodeAt(0);

        // 한글인지 확인 (가 ~ 힣: 44032 ~ 55203)
        if (code >= 44032 && code <= 55203) {
            const index = Math.floor((code - 44032) / 588);
            return CHOSUNG_LIST[index];
        }
        return ''; // 한글이 아니면 빈 문자열
    }
//-->
</script>
목록
정보공유
Total 460건 1 페이지
번호 제목 글쓴이 날짜 조회
460 관리자 권한이 super 아니고 관리권한설정을 부여받은 회원이 관리자 화면에 접속했을때 부여받은 메뉴로 바로 접속되도록 처리 (2) 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 21:51 7
459 관리자 권한이 super 아니고 관리권한설정을 부여받은 회원이 관리자 화면에 접속했을때 부여받은 메뉴로 바로 접속되도록 처리 (1) 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18:54 15
458 SQL 주입 방지 Prepared Statement 의 생활화 mysqli PDO 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 17:21 11
457 크로스 사이트 스크립팅(XSS) 테스트 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-12 92
456 2일전부터 오늘까지의 데이터 정보 가져오기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-05 181
455 text input 박스 에 휴대폰번호 입력할때 자동으로 하이픈 넣기 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 07-18 304
454 주소 정보 입력시 다음우편번호 스크립트를 사용할때 배열처리 할 경우 오류 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 07-11 431
453 자바스크립트를 이용해서 버튼 클릭시 이미지로 저장하는 방법 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-30 980
452 내부망의 자료를 외부에 연결해서 사용하게 하고 싶을때 사용하는 ngrok 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-27 1140
451 html 폴더 생성하고 html 하위 파일은 확장자 없이도 연결가능하도록 .htaccess 파일 설정하기 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-21 1244
450 on off 가능한 checkbox css + jquery 조합 버튼 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-17 1183
열람중 비동기식으로 초성 버튼 클릭 보여주기 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-13 1303
448 그누보드 관리자화면에 iframe 으로 띄울경우 엣지브라우저에서 튕기는 현상 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-17 2388
447 쿼리 성능 최적화 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-07 2182
446 스마트 에디터 세로 사이즈 강제로 해당 페이지에서만 늘리는 방법 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 02-28 2389