728x90
검색 효과01
자바스크립트를 이용하여 검색효과 만들 수 있습니다. 사용자가 입력한 키워드를 정확하게 찾을 수 있습니다.
자바스크립트
검색효과를 만들기 위한 자바스크립트 작성법입니다. indexOf()메서드를 이용하여 출력하였습니다. indexOf()는 문자열에서 특정 문자의 위치를 찾아 숫자를 반환하는 메서드입니다. 따라서 indexOf()값이 0(false)이 출력되는 값만 hide를 지워주어 내가 원하는 키워드를 출력할 수 있습니다.
//선택자
const searchBox = document.querySelector(".search__box input"); //input 박스, 검색 영역
const searchList = document.querySelectorAll(".search__list ul li"); //목록 리스트
searchBox.addEventListener("keyup", () => {
const searchWord = searchBox.value; //사용자가 입력한 키워드
searchList.forEach(el => {
const cssName = el.dataset.name;
if(cssName.indexOf(searchWord)){
el.classList.add("hide");
} else {
el.classList.remove("hide"); //indexOf()값이 0(false)이 출력되는 값만 hide를 지워줌
}
});
});
728x90
반응형
'JAVASCRIPT Effect' 카테고리의 다른 글
| QUIZ Effect 05 (2) | 2022.08.18 |
|---|---|
| SEARCH Effect 02 (3) | 2022.08.17 |
| QUIZ Effect 04 (7) | 2022.08.08 |
| QUIZ Effect 03 (11) | 2022.08.05 |
| QUIZ Effect 02 (9) | 2022.08.04 |
댓글