개발자의 끄적끄적

[자바스크립트] 리스트 검색 필터 본문

개발/javascript & jquery

[자바스크립트] 리스트 검색 필터

효벨 2020. 7. 29. 03:00
728x90
반응형

[자바스크립트] 리스트 검색 필터

 

 

이미 JSP단에 나열된 리스트가 있다고 하자. 그럴 때 특정 키워드를 입력해 해당 단어를 포함한 목록들을 추려내고자 한다면 contains 함수를 사용할 수 있을것이다. (본 게시글에서는 DB에서의 필터링을 다루지 않는다.)


<%@ 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>

 

 

출처: https://tozitizi.tistory.com/entry/자바스크립트-리스트-검색-필터 [TOZITIZI]

반응형
저작자표시 비영리 변경금지

'개발 > javascript & jquery' 카테고리의 다른 글

[JS/Calendar] 바닐라 자바스크립트로 달력 구현하기 [펌]  (0) 2020.07.31
[Javascript] 날짜 및 시간 설정, 경과 시간 계산, 비교 [펌]  (0) 2020.07.30
[vue.js] Vuex 시작하기 1 - Vuex와 State [펌]  (0) 2020.07.29
[javascript] location 객체  (0) 2020.07.18
[jquery] datepicker label explorer 오류  (0) 2020.07.11
'개발/javascript & jquery' Related Articles more
Comments