logo

jquery filter, 실시간 검색

2021. 02. 17. #jqeury #filter #toggle
작업하다 노트가 필요해 적은 실시간 검색처럼 보이는 스크립트.

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

실시간 검색 물씬 남.

 

HTML(Laravel Blade Template)

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<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>
 
cs

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

 

Script

1
2
3
4
5
6
7
8
<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>
cs

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

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

 

Demo

 

2
Explore Logs
브라우저별로 스크립트 따로 쓰는 법, ie 조건문

브라우저별로 스크립트 따로 쓰는 법, ie 조건문

Laravel에서 ajax로 FormData 넘길때 method에 의해 발생할 수 있는 오류

Laravel에서 ajax로 FormData 넘길때 method에 의해 발생할 수 있는 오류

jquery filter, 실시간 검색

jquery filter, 실시간 검색

Composer 속도 향상시키기, 한국 Packagist 미러 사이트

Composer 속도 향상시키기, 한국 Packagist 미러 사이트

Ad for you