jQuery - 필터
jQuery 필터
jQuery를 사용하여 특정 요소를 필터링/검색합니다.
필터 테이블
테이블의 항목에 대해 대소문자를 구분하지 않는 검색을 수행합니다.
예시
Type something in the input field to search the table for first names, last names or emails:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
| Anja | Ravendale | [email protected] |
제이쿼리
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var
value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
예제 설명: jQuery를 사용하여 각 테이블 행을 반복하여 입력 필드의 값과 일치하는 텍스트 값이 있는지 확인합니다. 이 toggle()메서드 display:none는 검색과 일치하지 않는 행( )을 숨깁니다. DOM 메서드를 사용 toLowerCase()하여 텍스트를 소문자로 변환하여 검색 대소문자를 구분하지 않습니다(검색 시 "john", "John" 및 "JOHN" 허용).
필터 목록
목록의 항목에 대해 대소문자를 구분하지 않는 검색을 수행합니다.
예시
Type something in the input field to search the list for items:
- First item
- Second item
- Third item
- Fourth
무엇이든 필터링
div 요소 내부의 텍스트에 대해 대소문자를 구분하지 않는 검색을 수행합니다.
예시
I am a paragraph.
I am a div element inside div.
Another paragraph.