⚠ 이 글은 2년 이상 지난 이야기에요. 읽으실때 참고!
개발
Javascript 개발 일지
jquery filter, 실시간 검색
549 views as of February 16, 2021.
테이블이나 리스트형식의 데이터를 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
