내일배움캠프 4일차 코드정리 이름 검색기능추가

오늘은 이름 검색 기능과 인풋창을 입력후 초기화하는 코드를 넣어봤다.

function filter() {

            let search = $('#search').val().toLowerCase();

            let card = $('.col')

            for (let i = 0; i < card.length; i++) {

                name = card[i].getElementsByClassName("card-title");

                if (name[0].innerHTML.toUpperCase().indexOf(search) != -1) {

                    $(".col")[i].style.display = 'flex'

                } else {

                    $(".col")[i].style.display = "none"

                }

            }

        }

변수 search와 card를 입력후 반복문을 통해 name에 html 클래스 card-title를 변수를 선언후 if문으로 search에 입력된 값과 비교하여 card-title에 맞는 값이 나오면 나머지 클래스 col에 디스플레이를 none을 주고 맞는 col클래스에 flex를 줘 화면을 띄우는 작업후

 

            <div class="input-group m-auto mt-5 mb-5 w-50">

                <input type="text" id="search" class="form-control" placeholder="이름을 입력하세요" aria-label="ico_search"

                    aria-describedby="button-addon2" onkeyup="if(window.event.keyCode==13){filter(),clearInput()}">

                <button class="btn btn-outline-secondary" onclick="filter(),clearInput()" type="button"

                    id="button-addon2">검색</button>

            </div>

onkeyup이벤트와 onclick 이벤트에 입력하였고 onkeyup에 검색버튼을 누르지않아도 엔터버튼을 통해 값을 찾을수 있도록 넣어줬다.

 

그리고 인풋이벤트후 초기화 코드는

function clearInput(){

            let el = document.getElementsByTagName('input');

           

            for(var i=0; i<el.length; i++){

                el[i].value = '';

            }

            console.log("clearInput 구현")

        }

를 통해 구현하였다. 태그인 input을 전체적으로 잡아줘서

 

반복문을 통해 변수 el 값들을 ''으로 Null값을 전해주게 하였다.