logo
2021. 02. 17.

jquery filter, 실시간 검색

테이블이나 리스트형식의 데이터를 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
[리코리스] 남제국 레이드(극) 멀티 2인 런

[리코리스] 남제국 레이드(극) 멀티 2인 런

[리코리스] 북제국 레이드(극) 하드 난이도 멀티 2인 기록

[리코리스] 북제국 레이드(극) 하드 난이도 멀티 2인 기록

작업하다 노트가 필요해 적은 실시간 검색처럼 보이는 스크립트.
브라우저별로 스크립트 따로 쓰는 법, ie 조건문

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

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

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

2021. 02. 19. 1
jquery filter, 실시간 검색

jquery filter, 실시간 검색

2021. 02. 17. 2
Composer 속도 향상시키기, 한국 Packagist 미러 사이트

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

2020. 07. 03. 2
로그 더 보기