728x90
검색 효과02
자바스크립트를 이용하여 검색효과 만들 수 있습니다. 사용자가 입력한 키워드를 정확하게 찾을 수 있습니다. includes()메서드를 이용하여 CSS 속성 검색하기를 만들어 보았습니다.
자바스크립트
검색효과를 만들기 위한 자바스크립트 작성법입니다. 여기서는 includes()메서드를 이용하여 출력하였습니다. includes() 메서드는 문자열이 특정 요소를 포함하고 있는지 판별하여 불린(true, false)으로 반환합니다. 따라서, includes() 메서드의 특성을 사용하여 자바스크립트를 작성하였습니다.
//선택자
const searchBox = document.querySelector(".search__box input"); //input 박스, 검색 영역
const searchList = document.querySelectorAll(".search__list ul li"); //목록 리스트
const searchInfo = document.querySelector(".search__info .num"); //전체 개수
//속성 갯수 설정하기
searchInfo.textContent = searchList.length; //length를 이용
//검색 영역
searchBox.addEventListener("keyup", ()=>{
const searchWord = searchBox.value; //사용자가 입력한 키워드
searchList.forEach(el => {
const cssName = el.dataset.name; //CSS 속성의 모든 값
//console.log(cssName); -> css 속성이 모두 들어왔는지 확인
if(cssName.includes(searchWord)){ //true를 반환하면 "hide"를 제거하고 false를 반환하면 "hide" 추가
el.classList.remove("hide");
} else {
el.classList.add("hide");
}
});
});
728x90
반응형
'JAVASCRIPT Effect' 카테고리의 다른 글
| SEARCH Effect 03 (3) | 2022.08.22 |
|---|---|
| QUIZ Effect 05 (2) | 2022.08.18 |
| SEARCH Effect 01 (3) | 2022.08.16 |
| QUIZ Effect 04 (7) | 2022.08.08 |
| QUIZ Effect 03 (11) | 2022.08.05 |
댓글