이미 클라이언트단에 나열된 리스트가 있다고 하자. 그럴 때 특정 키워드를 입력해 해당 단어를 포함한 목록들을 추려내고자 한다면 contains 함수를 사용할 수 있다. (본 게시글에서는 서버에서의 필터링을 다루지 않는다.)
<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Test</title>
</head>
<body>
<div>
검색: <input id="filterText" type="text"><br>
<ul class="filterUL">
<li>나미야 잡화점의 기적(양장본)</li>
<li>창문 넘어 도망친 노인</li>
<li>코끼리의 무덤은 없다</li>
<li>꾸뻬씨의 행복여행(양장본)</li>
<li>앵무새 죽이기</li>
</ul>
</div>
</body>
<script src="<c:url value="/resources/js/jquery-2.1.4.min.js"/>"></script>
<script type="text/javascript">
jQuery(function($) {
$('#filterText').keyup(function(event) {
var val = $(this).val();
if (val == "") {
$('.filterUL li').show();
} else {
$('.filterUL li').hide();
$(".filterUL li:contains('"+val+"')").show();
}
});
});
</script>
</html>
