BS 테이블 검색필터
<!DOCTYPE html>
<html lang="ko">
<head>
<title>검색 필터 예제</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<input class="form-control" id="hzInput" type="text" placeholder="Search..">
<br>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>등급</th>
<th>과정</th>
<th>설명</th>
</tr>
</thead>
<tbody id="hzTable" >
<tr>
<td>초급</td>
<td>HTML</td>
<td>홈페이지 기본 뼈대</td>
</tr>
<tr>
<td>중급</td>
<td>CSS</td>
<td>홈페이지 디자인</td>
</tr>
<tr>
<td>고급</td>
<td>JS</td>
<td>홈페이지 동적 기능</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function(){
$("#hzInput ").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#hzTable tr ").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</body>
</html>
※ $(this) 의 text를 소문자로 변경한 값이 value를 포함하고 있다면 $(this)를 toggle 해라.toggle() toLowerCase ()
BS 리스트 검색필터
<!DOCTYPE html>
<html lang="ko">
<head>
<title>리스트 검색 필터</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<input class="form-control" id="hzInput" type="text" placeholder="Search..">
<br>
<ul class="list-group" id="hzList" >
<li class="list-group-item">HTML</li>
<li class="list-group-item">CSS</li>
<li class="list-group-item">JS</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#hzInput ").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#hzList li ").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</body>
</html>
BS드롭다운 검색필터
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* input 입력창 스타일 */
#hzInput {
padding: 20px;
margin-top: -6px;
border: 0;
border-radius: 0;
color:white;
background: black;
}
</style>
</head>
<body>
<div class="container">
<div class="dropdown ">
<button class="btn btn-primary dropdown-toggle " type="button" data-toggle="dropdown" >
<ul class="dropdown-menu" >
<input class="form-control" id="hzInput " type="text" placeholder="Search..">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JS</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">SQL</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
$("#hzInput ").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".dropdown-menu li ").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</body>
</html>
BS텍스트 검색필터
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<input class="form-control" id="hzInput" type="text" placeholder="Search..">
<div id="hzDIV" >
<p>HTML</p>
<div>CSS</div>
<button class="btn">JS</button>
<button class="btn btn-info">SQL</button>
<p>PHP</p>
</div>
</div>
<script>
$(document).ready(function(){
$("#hzInput ").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#hzDIV * ").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</body>
</html>
