티스토리 뷰

WEB/JQuery

폴더 트리메뉴 한글 검색포함

silverline79 2026. 1. 22. 11:25 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>한글 검색 지원 폴더 트리</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body { font-family: 'Malgun Gothic', sans-serif; padding: 20px; background: #f0f2f5; }
        .tree-container { background: #fff; width: 450px; margin: 0 auto; padding: 20px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
        .search-box input { width: 100%; padding: 12px; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; }
        ul.tree, ul.tree ul { list-style: none; padding-left: 20px; }
        .folder, .file { padding: 5px 8px; cursor: pointer; border-radius: 4px; display: inline-block; margin: 2px 0; }
        .folder:hover, .file:hover { background: #e9ecef; }
        .folder + ul { display: none; }
        .folder.active + ul { display: block; }
        .highlight { background-color: #ffeb3b !important; font-weight: bold; } /* 하이라이트 스타일 */
        #no-result { display: none; color: #888; text-align: center; padding: 20px; }
    </style>
</head>
<body>

<div class="tree-container">
    <h2>📁 문서 보관함</h2>
    <div class="search-box">
        <input type="text" id="tree-search" placeholder="파일명(한글/영문)을 입력하세요...">
    </div>

    <div id="no-result">검색 결과가 없습니다.</div>

    <ul class="tree" id="main-tree">
        <li>
            <div class="folder active">📂 개인문서</div>
            <ul>
                <li>
                    <div class="folder">📂 프로젝트_보고서</div>
                    <ul>
                        <li class="file">📄 결산보고서_최종.pdf</li>
                        <li class="file">📄 신규사업_기획안.docx</li>
                        <li class="file">📄 리액트_공부자료.txt</li>
                    </ul>
                </li>
                <li>
                    <div class="folder">📂 사진첩</div>
                    <ul>
                        <li class="file">📄 제주도_여행기.jpg</li>
                        <li class="file">📄 가족사진.png</li>
                    </ul>
                </li>
                <li class="file">📄 자기소개서_2026.hwp</li>
            </ul>
        </li>
        <li class="file">📄 회사규정_가이드.pdf</li>
    </ul>
</div>

<script>
$(document).ready(function() {
    // 1. 대소문자 무시 + 한글 포함 검색 커스텀 선택자
    $.expr[":"].contains = $.expr.createPseudo(function(arg) {
        return function(elem) {
            // trim()을 추가하여 앞뒤 공백 제거 후 비교
            return $(elem).text().toLowerCase().indexOf(arg.toLowerCase().trim()) >= 0;
        };
    });

    // 2. 폴더 열기/닫기
    $(document).on('click', '.folder', function() {
        $(this).next('ul').slideToggle(200);
        $(this).toggleClass('active');
    });

    // 3. 실시간 검색 (한글 지원)
    $('#tree-search').on('input', function() { // keyup보다 input 이벤트가 한글 입력에 더 정확함
        const value = $(this).val();
        const $treeItems = $('#main-tree li');
        const $noResult = $('#no-result');

        // 하이라이트 초기화
        $('.folder, .file').removeClass('highlight');

        if (!value.trim()) {
            $treeItems.show();
            $noResult.hide();
            return;
        }

        $treeItems.hide();

        // 한글 포함 검색 수행
        const $matchedItems = $("#main-tree li:contains('" + value + "')");

        if ($matchedItems.length > 0) {
            $noResult.hide();
            $matchedItems.each(function() {
                $(this).show();
                $(this).parents('li').show();
                $(this).parents('ul').show();
                $(this).parents('ul').prev('.folder').addClass('active');

                // 실제 텍스트가 일치하는 자식 요소에 하이라이트
                $(this).children('.folder, .file').filter(":contains('" + value + "')").addClass('highlight');
            });
        } else {
            $noResult.show();
        }
    });
});
</script>

</body>
</html>

 

 

※ 해당 내용은 Google Gmini3.0에서 작성되었습니다.

'WEB > JQuery' 카테고리의 다른 글

상세 클릭포함 트리메뉴  (0) 2026.01.22
폴더 메뉴 한글검색 전체 열기닫기 추가  (1) 2026.01.22
폴더 트리메뉴  (0) 2026.01.22
모바일 전체 메뉴  (0) 2026.01.18
배너 좌우 이동 jQuery  (0) 2025.01.10
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/01   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함