서치 이펙트03

검색 효과

저번시간에 이어서 또 검색 사이트를 만들어보겠습니다. 이번엔 일치하는 단어를 찾는것이 아니라 알파벳 순으로 찾기를 만들어 볼게요. 또 알파벳순으로 검색된 이후에 나타난 검색 속성값의 갯수를 구해보겠습니다.

---

원본 소스 보기 원본 사이트

---

▶ 이 사이트에 사용된 charAt()의 특징에 대해 간단하게만 알아보고 가겠습니다. includes()는 문자열에서 지정한 index(위치값)에 해당하는 값을 문자열로 출력합니다.

const str1 ="javascript reference";
const currentStr1 = str1.charAt(); //j
const currentStr2 = str1.charAt("0"); //j
const currentStr3 = str1.charAt("1"); //a
const currentStr4 = str1.charAt("2"); //v

JS 소스 분석하기

const searchkeyWord = document.querySelectorAll(".search__info .keyword span");   //알파벳
const searchList = document.querySelectorAll(".search__list ul li");    //목록 리스트
const searchInfo = document.querySelector(".search__info .num");

// 전채 갯수 구하기
searchInfo.textContent = searchList.length



// 
searchkeyWord.forEach(el =>{
    el.addEventListener("click", () =>{
        const searchWord = el.innerText;    //사용자가 클릭한 알파벳


        searchList.forEach(el => {
            const cssName = el.querySelector("strong").innerText;           //속성 텍스트

            // 알파벳 첫글자 == CSS 속성의 첫글자
            if(searchWord.charAt(0)==cssName.charAt(0)){
                el.classList.remove("hide");
                
            } else{
                el.classList.add("hide");
            }
        })
        const searchList2 = document.querySelectorAll(".search__list ul .hide");
        searchInfo.textContent = searchList.length -= searchList2.length;
    });
});

html에서 각각의 li태그에 <strong>태그안에 속성명을 넣어주었는데요. 이번엔 이걸 이용, 비교해서 검색효과를 만들겠습니다. 이번엔 알파벳 순이므로 a를 눌렀을 경우를 예시로 들어볼게요.

'a'라는 버튼을 누르게되면 charAt(0)를 통해 a라는 문자를 반환하겠죠? 그리고 cssName.charAt(0)또한 첫번째 문자가 a인 속성값들과 비교하게 됩니다. 그러므로 첫 글자가 a가 아닌 문자들은 class=hide가 붙어 미출력되고, 첫 글자가 a인 문자들만 class=hide가 제거되어 우리눈에 보이게 되는것입니다.

▶ 이번엔 출력된 갯수만 구하는 스크립트에 대해 알아봐요

const searchList2 = document.querySelectorAll(".search__list ul .hide");
searchInfo.textContent = searchList.length -= searchList2.length;

저희가 기존 검색효과에서 css속성 전체 갯수를 searchList라는 변수에 넣어주었는데요. "전체 값 - 출력되지 않은 속성들 갯수"를 해주면 간단하게 되겠죠?
그래서 새롭게 searchList2라는 변수를 만든 후 이 변수에 if문이 실행된 후 class=hide가 붙은 것들의 갯수를 구하게 합니다. 그러면 전체갯수는 이미 구해져 있으므로 그 값에서 새롭게 구한 searchList2값을 빼면 되겠죠?
끝이에요!