[JavaScript] Search Filter

우리가 사이트를 이용할 때 흔히 볼 수 있는 검색 필터 기능을 한 번 자바스크립트로 구현해볼 것이다.

---

코드 풀이 

filter는 boolean 형식이다.

 

form태그를 쓴다면, form 이 제출될때 이벤트가 발생하도록 해야함.

: input 에 대한 key 이벤트 사용 X
submit 에 대한 click 이벤트 사용 X
form 에 대한 submit 이벤트를 사용한다.

form이 submit 되면 새로운 요청이 발생하고, 이후의 자바 스크립트는 무시한다.

 

form 에 대한 submit 이벤트는 반드시 !! 첫줄에 이벤트 기본작동을 막아야함.
->   event.preventDefault()

 

확실하게 하기 위해서는 console.log 를 이용하는 것이 가장 바람직하다.

->   console.log(searchValue)  : 확인이 완료되면, 해당 코드는 아예 지우거나, 또는 주석처리로 남겨둔다 

 

검색어 가져오기
->   const searchValue = event.target.querySelector('input').value

 

대상을 배열 형태로 불러옴
->   const arr  = Array.from(document.querySelectorAll('ul > li'))

     

배열의 각각에 있는 hidden 을 모두 지워서 초기화

->   arr.forEach(e => e.classList.remove('hidden'))

 

검색어를 포함하지 않는 배열을 별도로 불러와서 모두 hidden 처리하기

: arr.filter 는 새로운 배열을 반환하기 때문에 arr2로 저장

  arr.filter의 콜백함수는 boolean 타입을 반환하면 됨

->  const arr2 = arr.filter(e => e.innerText.includes(searchValue) == false)   
arr2.forEach(e => e.classList.add('hidden'))

 

<style>
        .hidden {
            display: none;
        }

    </style>
</head>

    <h1>내가 좋아하는 남자배우</h1>
    <hr>

    <form id="searchForm">
        <p>
            <input id="search" type="search" autocomplete="off" autofocus>
            <input type="submit" value="검색">
        </p>

    </form>

    <ul>
        <li>차은우</li>
        <li>김수현</li>
        <li>서강준</li>
        <li>변우석</li>
        <li>위하준</li>
        <li>김우빈</li>
        <li>김건우</li>
        <li>이민기</li>
        <li>송강</li>
        <li>강태오</li>
        <li>이민기</li>
        <li>우도환</li>
        <li>조정석</li>
    </ul>


    <script>

        const searchForm = document.getElementById('searchForm')
        const ul = document.querySelector('ul')

        searchForm.onsubmit = function(event) {
            event.preventDefault()
            
            const searchValue = event.target.querySelector('input').value

            const arr  = Array.from(document.querySelectorAll('ul > li'))
            arr.forEach(e => e.classList.remove('hidden'))


            //  검색어를 포함하지 않는 배열을 별도로 불러와서 모두 hidden 처리하기
            //  arr.filter 는 새로운 배열을 반환함(arr2 로 저장)
            //  arr.filter의 콜백함수는 boolean 타입을 반환하면 됨
            //  (조건을 만족하는 내용만 남기고 모두 제거)
            const arr2 = arr.filter(e => e.innerText.includes(searchValue) == false)    
            arr2.forEach(e => e.classList.add('hidden'))    
        }
    </script>

</body>
</html>

 

---

boolean형식으로 되어 있어서 조건을 처리하기가 까다롭지 않았다.

검색필터를 다른 언어로도 코드를 짜보니까 새롭기도 하고 재밌었다.