[Bootstrap] Filter(검색 기능)

 

Filter

 

 

 

filter : 검색

form-cotrol : form padding설정 등

table : table padding설정 등

table-striped : 줄단위로 백그라운드 설정

 

 

html

<div class="container">
	<h1>Filter</h1>
	<input type="text" id="search" placeholder="Search" class="form-control"/>
	<hr/>
	<table class="table table-striped">
		<thead>
			<tr>
				<th>번호</th>
				<th>이름</th>
				<th>연락처</th>
				<th>이메일</th>
			</tr>
		</thead>
		<tbody id="searchList">
			<tr>
				<td>1</td>
				<td>강하나</td>
				<td>010-4444-5555</td>
				<td>oneriver@naver.com</td>
			</tr>
			<tr>
				<td>2</td>
				<td>박코코</td>
				<td>010-1111-2222</td>
				<td>coco05@google.com</td>
			</tr>
			<tr>
				<td>3</td>
				<td>아몬드</td>
				<td>010-1111-3333</td>
				<td>monmon@nate.com</td>
			</tr>
			<tr>
				<td>4</td>
				<td>랄랄라</td>
				<td>010-3232-4444</td>
				<td>ralralra@naver.com</td>
			</tr>
			<tr>
				<td>5</td>
				<td>립톤</td>
				<td>010-1212-5656</td>
				<td>lipton@google.com</td>
			</tr>
			<tr>
				<td>6</td>
				<td>김안나</td>
				<td>010-2444-3444</td>
				<td>anna@naver.com</td>
			</tr>
			<tr>
				<td>7</td>
				<td>김엘사</td>
				<td>010-8888-8888</td>
				<td>elsaaaa@daum.net</td>
			</tr>
			<tr>
				<td>8</td>
				<td>왕겨울</td>
				<td>010-1212-1212</td>
				<td>winterking@naver.com</td>
			</tr>
		</tbody>
	</table>
</div>

 

 

jquery

<script>
	$(function(){
		// search에 keyup이벤트 발생한 경우 테이블에서 검색어에 해당하는 리스트만 출력
		$("#search").keyup(function(){
			var value = $(this).val().toLowerCase();	//대소문자 구분X
			
			// searchList 내의 한 줄씩 filter
			$("#searchList>tr").filter(function(){
				//value가 tr에 있는지 확인 있으면 index값 없으면 -1
				var idx = $(this).text().toLowerCase().indexOf(value);
				$(this).toggle(idx>-1);	//true-> 그냥 둠, false-> 숨김
			});
			
		});
	});
</script>