목차
- Table 검색필터링
- List 검색필터링
- Dropdown 검색필터링
- div 검색필터링
※ BS엔 필터링 구성요소 없음. (※ jQuery 이용해야 가능.)
※ BS3와 동일
Table 검색필터링
<!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/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/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>
결과보기
PS.
1.
$(this)의 text를 소문자로 변경한 값이 value 포함 시 $(this)를 toggle 해라.
2.
toggle() 메서드
- 검색과 일치하지 않는 행을 숨기는 역할. (display : none 처리)
- 기본적으로 visible 이면 invisible 로, invisible 이면 visible 로 설정"하지만 안에 참거짓 (boolean)을 쓴 경우에는 true면 show, false면 hide시킴.
3.
toLowerCase () 메서드
- 텍스트를 소문자로 변환해 검색에서 대소 문자를 구분하지 않는 역할.
List 검색필터링
<!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/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/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>
결과보기
Dropdown 검색필터링
<!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/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/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">
메뉴보기 <span class="caret"></span>
</button>
<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>
결과보기
div 검색필터링
<!DOCTYPE html>
<html>
<head>
<title>DIV안 텍스트 검색필터링</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/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>
결과보기
