서치 이펙트 02

서치 이펙트

자바스크립트를 이용해서 CSS 속성 요소를 검색하는 효과 만들기입니다.

---

서치 이펙트 02

includes( ) 메소드를 이용해서 CSS 속성 요소를 검색하는 효과입니다.

---

indexOf( ) 메소드를 사용해 만든 서치 이펙트 01과 똑같지만 이번엔 includes( ) 메소드를\ 이용한다는 차이점이 있습니다.
\ includes( ) 메소드에 대한 자세한 설명은 이 곳에서 보실 수 있습니다.

1. 검색 목록 만들기

//SCRIPT 파트


//선택자
const searchBox = document.querySelector(".search__box input");           //검색 영역
const searchList = document.querySelectorAll(".search__list ul li");    //목록 리스트
const searchInfo = document.querySelector(".search__info .num");        //전체 갯수

//속성 갯수 구하기
searchInfo.textContent = searchList.length;
// document.querySelector(".num").innerHTML = searchList.length;

// searchList.forEach((el,i,a) => {
//     document.querySelector(".num").innerHTML = a.length;
// });


//검색 영역
searchList.forEach(el => {
    el.classList.add("show")
});

searchBox.addEventListener("keyup", () => {
    const searchWord = searchBox.value       //사용자가 입력한 키워드

    searchList.forEach(el => {
        const cssName = el.dataset.name;     //CSS 속성 모든 값
    
        if(cssName.includes(searchWord)){
            el.classList.remove("hide");
        } else {
            el.classList.add("hide");
        }
    });
});

indexOf( ) 메소드는 특정 문자를 찾으면 그 숫자를 반환하는데, includes( ) 메소드는 특정 문자열이 포함되어 있으면 불린(true/false)으로 반환한다는 차이점이 있습니다. 그래서 includes( ) 메소드 방식은 indexOf( ) 메소드 방식과 반대로 먼저 모든 목록을 지운 후 키워드가 일치한 목록을 보여줍니다.

이러한 차이 때문에 indexOf( ) 메소드 방식은 첫글자부터 순서대로 일치할 시에만 목록에 검색되지만, includes( ) 메소드 방식은 키워드가 문자열 어디에 위치하든 포함하기만 하면 검색됩니다.

원본 소스 보기