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

정보공유

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

작성자
위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물
작성일
25-05-13 10:30
조회수
171 건
댓글
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 53건 1 페이지
번호 제목 글쓴이 날짜 조회
열람중 비동기식으로 초성 버튼 클릭 보여주기 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-13 172
52 금액 카운팅 모션 다라라락 변화 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 06-26 3188
51 php 와 ajax 를 이용해서 파일 업로드 할때 대용량 파일을 업로드 하는 방법 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-23 4443
50 datepicker 를 이용해서 달력3개를 표시하고 원하는 날짜만 선택이 가능하도록. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-28 3829
49 magnificPopup css 를 추가하여 popup 마다 다른 사이즈 로 띄우기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-16 4592
48 magnificPopup 조건이 맞지 않으면 popup 띄우지 않기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-12 4581
47 magnificPopup iframe 으로 form submit 하기 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-12 4521
46 magnificPopup 으로 창을 호출 후 날짜 입력박스에 datepicker 실행되지 않는경우 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-13 5389
45 magnificPopup 파라미터 변수 값 ajax 타입으로 전송 방법 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-31 5364
44 jquery 로 text 필드와 file 첨부를 동시에. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-09 5267
43 파일 첨부 를 이미지버튼으로 대체한경우 첨부한 파일명 표시하기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-09 5368
42 폼을 생성하고 선택된(필요한) 영역의 값만 전송 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-17 6115
41 탭으로 나눠지는 슬라이드 쇼 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-13 8000
40 jquery fullcalendar eventOrder 정렬 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-23 17303
39 주소복사 계좌번호복사 URL복사 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 05-11 15010