목차
table 검색 필터 예제 List 검색 필터 예제 모든 요소 검색 필터 예제
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 속성의 속성값 내용은 검색 필터링 되지 않음.
