• 회원가입
  • 로그인
  • 구글아이디로 로그인

[Misc] JQ - 검색필터링 (= 일치값 찾기)

목차
  1. table 검색 필터 예제
  2. List 검색 필터 예제
  3. 모든 요소 검색 필터 예제

 

table 검색 필터 예제

 

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("#search").on("keyup", function() { // 검색창 입력 이벤트 발생 시

    var value = $(this).val().toLowerCase(); // 입력 내용을 소문자로 전환해 value 변수에 담아

    $("#homzzang tr").filter(function() { // 일치하는 tr 요소만 보여 줘.

      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) // 일치하는 글자 있으면

    });

  });

});

</script>

<style>

#search {

    height:30px;

    text-indent:5px;

}

table {

    font-family: arial, sans-serif;

    border-collapse: collapse;

    width: 100%;

}


td, th {

    border: 1px solid #fa4975;

    text-align: left;

    padding: 8px;

    color:#fa4975;

    height:40px;

}


tr:nth-child(even) {

    background-color: #fff8f8;

}

</style>

</head>

<body>


<h2>Table 검색 필터</h2>

<input id="search" type="text" placeholder="여기에 검색어 입력">

<br><br>


<table>

  <thead>

    <tr>

      <th>사이트명</th>

      <th>도메인</th>

      <th>주재</th>

    </tr>

  </thead>

  <tbody id="homzzang">

    <tr>

      <td>홈짱닷컴</td>

      <td>Homzzang.com</td>

      <td>HTML, CSS, JS, JQUERY, PHP, SQL, BS</td>

    </tr>

    <tr>

      <td>그누보드</td>

      <td>sir.kr</td>

      <td>그누보드5, 영카트5, 그누커머스, 홈짱 놀이터</td>

    </tr>

    <tr>

      <td>마이위트</td>

      <td>miwit.kr</td>

      <td>배추빌더5, 배추베이직, 곱슬최씨 님. 홈짱 놀이터</td>

    </tr>

    <tr>

      <td>아미나</td>

      <td>amina.co.kr</td>

      <td>아미나빌더, 한별아빠 님, 홈짱 놀이터</td>

    </tr>

  </tbody>

</table>


</body>

</html>


결과 보기


PS.

  • 테이블 헤드 마저 걸러지는 걸 막기 위해, tbody부터 검색함.
  • toggle() 메서드는 일치하지 않는 요소를 숨기는 역할 함. (즉, display:none 속성 부여 역할 함.)
  • toLowerCase() 메서드는 대문자 글자를 소문자로 전환해 대소문자 안 가리고 검색 하는 역할 함.



List 검색 필터 예제

 

<!DOCTYPE html>

<html>

<head>

<style>

 #search {

    height:30px;

    text-indent:5px;

}

  </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("#search").on("keyup", function() {

    var value = $(this).val().toLowerCase();

    $("#homzzang li").filter(function() {

      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

    });

  });

});

</script>

</head>

<body>


<h2>List 검색</h2>

<input id="search" type="text" placeholder="여기에 검색어 입력">

<br>


<ul id="homzzang">

  <li>홈짱닷컴</li>

  <li>Homzzang.com</li>

  <li>홈페이지</li>

  <li>제작강의</li>

</ul>

    

</body>

</html>


결과 보기


모든 요소 검색 필터 예제

 

<!DOCTYPE html>

<html>

<head>

<style>

#search {

    height:30px;

    text-indent:5px;

}

div {

    margin-bottom:20px;

}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("#search").on("keyup", function() {

    var value = $(this).val().toLowerCase();

    $("#homzzang *").filter(function() {

      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

    });

  });

});

</script>

</head>

<body>


<h2>모든 요소 검색 필터링</h2>

<input id="search" type="text" placeholder="Search..">

<div id="homzzang">

  <h2>홈짱닷컴 (h2 요소)</h2>

  <div>Homzzang.com (div 요소)</div>

  <button>회원가입 (buttom 요소)</button>

  <input type="button" value="로그인 (input요소) - 요건 검색 X">

  <p>홈페이지 제작 무료 강의 (p 요소)</p>

</div>

  

</body>

</html>



결과 보기

※ <input value="입력값"> 처럼, input 요소 value 속성의 속성값  내용은 검색 필터링 되지 않음.

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
basic JQ - 제이쿼리 입문
basic JQ - 선행지식 / 포함요소
basic JQ - 시작 (= 버전 + 다운 + 설치 + 외부링크) (jQuery, down, CDN)
basic JQ - syntax ★ - 기본구문 (= 최적작동시점) + (즉시호출/즉시작동/즉시실행) 구문 (= IIF… 2
Selector JQ - selector ★★★★★ - 선택자 (= 제어할 요소선택) ※ this선택자 (=디스선택자)
Event JQ - event ★ - 이벤트 (= 메서드실행 촉발사건) ※ e 매개변수를 명시적으로 전달해야 하는 이유
Event JQ - $(document).ready() 메서드 ★ - 문서로드완료후 실행 (= ready메서드 = 다…
Event JQ - click() 메서드 ★ - click 이벤트발생/함수실행. (= click메서드 = 클릭 메서드…
Event JQ - dblclick() 메서드 ★ - dblclick 이벤트발생/함수실행. (= dblclick메서드 …
Event JQ - mouseenter() 메서드 ★★★ - mouseenter 이벤트발생/함수실행. (= mousee…
Event JQ - mouseleave() 메서드 ★ - mouseleave 이벤트발생/함수실행 (= mouseleav…
Event JQ - mousedown() 메서드 - mousedown 이벤트발생/함수실행. (= mousedown메서…
Event JQ - mouseup() 메서드 - mouseup 이벤트발생/함수실행. (= mouseup메서드 = 마우스…
Event JQ - hover() 메서드 ★ - hover 이벤트발생/함수실행. (= hover메서드 = 허버 메서드)
Event JQ - blur() 메서드 ★ - 포커스 해제/제거(= blur메서드 = 블러메서드) ※ 포커스 시 아웃…
Event JQ - on() 메서드 ★★★★★ - 이벤트핸들러 부착 (= 여러이벤트・여러메서드 함께실행 = 이벤트부착…
Effect JQ - Hide/Show - hide() / show() / toggle() 메서드 ★ - 숨기기/보이기…
Effect JQ - Fade (페이드) ★ - fadeIn() / fadeOut() / fadeToggle() / fa…
Effect JQ - slideDown() / slideUp() / slideToggle() 메서드 ★ - 슬라이드메서드…
1/15
목록
찾아주셔서 감사합니다. Since 2012