jQuery filter, 실시간 검색

테이블이나 리스트형식의 데이터를 jquery filter와 toggle을 응용해 구현한 코드입니다.

실시간 검색 물씬 남.

HTML(Laravel Blade Template)

Line 12의 input 태그에 onkeyup="tableFilter(this)" 으로 필터가 작동됨.

<div class="wrap_table">
    <div class="row justify-content-between mb-4">
        <div class="col-12 col-md-6">
            <i class="fas fa-circle fc_gray"></i>
            <span class="mr-3">사례 미시행</span>
            <i class="fas fa-circle fc_sub"></i>
            <span class="mr-3">사례 시행</span>
            <i class="fas fa-circle fc_point"></i>
            <span>수련과장 승인</span>
        </div>
        <div class="md-input form_search col-12 col-md-6 col-lg-4">
            <input type="text" name="keyword" class="md-form-control" placeholder="분야명으로 검색" onkeyup="tableFilter(this)">
            <span class="bar"></span>
            <button class="btn __nude search_ico"><i class="fal fa-search"></i> <span class="hidden">검색</span></button>
        </div>
    </div>
    <table class="table">
        <caption>임상술기</caption>
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col" class="text_left">임상분야</th>
            <th scope="col">사례</th>
        </tr>
        </thead>
        <tbody id="procedureTableBody">
        @foreach($procedures as $procedure)
            <tr role="button" onclick="openClinic({{ $procedure->id }})">
                <td>{{ $procedure->order }}</td>
                <td class="text_left fc_black">{{ $procedure->title }}</td>
                <td>
                    @for($i = 0; $i < $procedure->case; $i++)
                        @isset($procedure->clinics[$i])
                            @if($procedure->clinics[$i]->approved_at)
                                <i class="fas fa-circle fc_point"></i>
                            @else
                                <i class="fas fa-circle fc_sub"></i>
                            @endif
                        @else
                            <i class="fas fa-circle fc_gray"></i>
                        @endisset
                    @endfor
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>
</div>Copy

Script

<script>
    function tableFilter(e) {
        var value = e.value.toLowerCase();
        $('#procedureTableBody tr').filter(function() {
            $(this).toggle($(this).children('td:nth-child(2)').text().toLowerCase().indexOf(value) > -1);
        });
    }
</script>Copy

테이블 행의 모든 데이터를 기준으로 필터를 하고싶으면 .children('td:nth-child(2)') 를 빼면 됨.

위 스크립트는 테이블의 2번째 열(Demo의 '임상분야')을 필터링 기준으로 삼음.

Demo