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

정보공유

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

작성자
위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물
작성일
25-05-13 10:30
조회수
6 건
댓글
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 449건 1 페이지
번호 제목 글쓴이 날짜 조회
열람중 비동기식으로 초성 버튼 클릭 보여주기 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10:30 7
448 그누보드 관리자화면에 iframe 으로 띄울경우 엣지브라우저에서 튕기는 현상 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-17 1086
447 쿼리 성능 최적화 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-07 1059
446 스마트 에디터 세로 사이즈 강제로 해당 페이지에서만 늘리는 방법 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 02-28 1198
445 그누보드에 reCAPTCHA 설정하기 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-07 1353
444 mb_id 가 포함된 테이블 목록 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-22 1848
443 숫자형 input 요소 글자수 제한 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-29 2553
442 php 8.0 이상 버전에서 엑셀파일 업로드 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 07-18 3883
441 금액 카운팅 모션 다라라락 변화 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 06-26 3130
440 가장 심플한 예약 주문번호 생성 코드 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-28 4015
439 php 와 ajax 를 이용해서 파일 업로드 할때 대용량 파일을 업로드 하는 방법 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-23 4387
438 dl dt dd css 샘플 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-13 3489
437 datepicker 를 이용해서 달력3개를 표시하고 원하는 날짜만 선택이 가능하도록. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-28 3779
436 입금된 주문도 준비, 배송전까지는 취소할 수 있도록 하는 방법 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-10 4079
435 CSS를 사용하여 4x4 형태의 갤러리 디자인 그리드 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-05 3897