728x90
검색 효과03
자바스크립트를 이용하여 검색효과 만들 수 있습니다. 사용자가 입력한 키워드를 정확하게 찾을 수 있습니다. charAt()메서드를 이용하여 CSS 속성 검색하기를 만들어 보았습니다. 이번에는 알파벳을 클릭했을 때 알파벳에 해당하는 요소들만 검색되게 하는 기능을 추가하였습니다.
자바스크립트
검색효과를 만들기 위한 자바스크립트 작성법입니다. 여기서는 charAt()메서드를 이용하여 출력하였습니다. charAt() 메서드는 지정한 인덱스의 문자를 추출하여 문자열을 반환합니다. 따라서, charAt() 메서드의 특성을 사용하여 자바스크립트를 작성하였습니다.
//선택자
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; //사용자가 클릭한 알파벳
//console.log(searchWord);
searchList.forEach(el => {
const cssName = el.querySelector("strong").innerText; //CSS속성 텍스트
//console.log(cssName)
//알파벳 첫글자 == 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;
})
});
728x90
반응형
'JAVASCRIPT Effect' 카테고리의 다른 글
| SLIDER Effect 01 (3) | 2022.08.29 |
|---|---|
| QUIZ Effect 06 (5) | 2022.08.24 |
| QUIZ Effect 05 (2) | 2022.08.18 |
| SEARCH Effect 02 (3) | 2022.08.17 |
| SEARCH Effect 01 (3) | 2022.08.16 |
댓글