결과

---

JQuery를 사용해서 포켓몬 검색 기능을 추가해봤다.
1. Select 요소에서 검색 기준을 선택한다.
2. 검색하면 끝!

검색 전체 코드

$(document).ready(function(){
        $("#none").hide();

        $("#search").keyup(function(){
            $(".card").show();
            var keyword = $(this).val().toLowerCase();//대소문자 구분없이 검색하기 위함
            
            $(".card").hide().filter(function(){
                var std = "." + $("#category").val();
                var key = $(this).find(std).text().toLowerCase();
                return key.includes(keyword);
            }).show();
            //var target = $(".card:contains('"+keyword+"')");
            if ($(".card:visible").length === 0) {
                $("#none").show();
            } else {
                $("#none").hide();
            }
        });
    });

<div id="none" class="col-12 none">검색하려는 포켓몬이 없습니다.</div>

이 요소를 처음에 화면 load 됐을 때는 안뜨게 만들기 위해
document.ready()되자마자

$("#none").hide();

로 숨겨놓는다.

<select id="category" style="height:5vh;font-size:1.3rem;margin-right:1vw">
            <option value="no">도감번호</option>
            <option value="name">이름</option>
        </select><input type="text" id="search" placeholder="검색" style="height: 5vh;font-size:1.3rem">

id가 search인 text에서 keyup 이벤트를 걸어 텍스트가 입력될 때마다 이벤트가 발생하게 한다.

$("#search").keyup(function(){
	
});

<div class="card" ...></div> //코드 생략

var keyword = $(this).val().toLowerCase();//대소문자 구분없이 검색하기 위함
            
            $(".card").hide().filter(function(){
                var std = "." + $("#category").val();
                var key = $(this).find(std).text().toLowerCase();
                return key.includes(keyword);
            }).show();

위 코드는 keyup 이벤트 함수 안에 들어가는 코드기 때문에 여기서 this는 #search이다.
1. #search의 value를 가져와서 keyword 변수에 저장한다.
2. select에서 검색 기준을 선택해서 선택한 검색 기준의 value를 가져와서 std 변수에 저장한다.

❗️❗️여기서 왜 id로 안찾고 굳이 .을 붙여서 클래스로 찾으려 하느냐?!
JSTL로 <c:forEach>를 사용해서 ArrayList로 넘어온 데이터를 돌면서 div를 계속 추가하기 때문에 요소의 고유한 id를 줄 수 없어서 클래스로 찾아야 함

filter함수를 썼기 때문에 return을 줘서 변수 key에 keyword가 있으면, 즉 요소에 검색하려는 텍스트가 포함되어 있으면 show()함수 실행, 없으면 hide()를 실행한다.

근데 이렇게 끝내버리면 검색을 마치고 다시 전체 데이터를 보고 싶을 때 hide된 애들이 다시 뜨지를 않음!!

그래서 keyup 이벤트 함수 안쪽 제일 위에

$(".card").show();

이 녀석을 추가해줘서 일단 keyup 이벤트가 일어날 때마다 숨겨놨던 모든 .card들을 show한 다음 다시 검색에 맞게 hide를 하게 하는 것임!!