• Q&A
  • 회원가입
  • 로그인

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

 

예제1 - 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>



결과 보기

※ 테이블 헤드 마저 걸러지는 걸 막기 위해, tbody부터 검색함.
※ toggle() 메서드는 일치하지 않는 요소를 숨기는 역할 함. (즉, display:none 속성 부여 역할 함.)

※ toLowerCase() 메서드는 대문자 글자를 소문자로 전환해 대소문자 안 가리고 검색 하는 역할 함.

 

 

예제2 - 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>



결과 보기


 

예제3 - 모든 요소 검색 필터

 

<!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 속성의 속성값  내용은 검색 필터링 되지 않음.

 

오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012