======jQuery - Filters======
<WRAP left notice 70%>
  * description : jQuery - Filters
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-19
</WRAP>
<WRAP clear></WRAP>
\\
====Source of the article====
[[https://www.w3schools.com/jquery/jquery_filters.asp|jQuery - Filters]]\\
\\
%%jQuery%%를 사용하여 특정 요소를 필터링/검색합니다.\\

=====Filter Tables=====
테이블의 항목에 대해 __대소 문자를 구분하지 않는__(case-insensitive) 검색을 실행합니다:\\

====예제====
<code jquery>
$(document).ready(function () {
      $("#myInput").on("keyup", function () {
        var value = $(this).val().toLowerCase();
        $("#myTable tr").filter(function () {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      });
    });
</code>
\\
**예제 설명:**\\
각 테이블 행을 반복하도록 %%jQuery%%를 사용하여 입력 필드의 값과 일치하는 텍스트 값이 있는지 확인합니다.\\ 
''toggle()'' 메서드는 검색과 일치하지 않는 행 (''%%display:none%%"")을 숨깁니다.\\ 
''toLowerCase()'' %%DOM%% 메서드를 사용하여 텍스트를 소문자로 변환하면, 검색이 대소문자를 구분하지 않습니다\\ 
(검색시 "john", "John"및 "JOHN"허용)\\
\\
=====Filter Lists=====
목록의 항목에 대해 대소문자를 구분하지 않는 검색을 실행합니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("#myInput").on("keyup", function () {
        var value = $(this).val().toLowerCase();
        $("#myList li").filter(function () {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      });
    });
</code>

=====Filter Anything=====
%%div%% 요소 내의 텍스트에 대해 대소문자를 구분하지 않는 검색을 수행합니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("#myInput").on("keyup", function () {
        var value = $(this).val().toLowerCase();
        $("#myDIV *").filter(function () {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      });
    });
</code>
\\
\\

{{tag>오션 jQuery - Filters}}