이펙트 응용편 - 서치 이펙트 네번째

검색 이펙트

이번 이펙트는 각 css 제목과 설명을 배열안에있는 객체로 저장하여 출력했습니다.

JS코드

keyup 을 통한 searchBox.value 를 가져와서 cssProperty 에있는 name 객체와 일치하면 출력이 되게했습니다.

코드 보기

//출력하기
cssProperty.map((e, i) => {
    searchList.innerHTML += `${e.name}`;
    searchNum.textContent = document.querySelectorAll(".search__list span").length;
});
//입력하기
searchBox.addEventListener("keyup", (e) => {
    let searchWord = searchBox.value;
    findProperty(searchWord);
});

document.querySelectorAll(".search__list span").forEach((el) => {
    el.addEventListener("click", (e) => {
        e.preventDefault();
        document.querySelector("#header").scrollIntoView({ behavior: "smooth" });
        findProperty(el.innerText);
    });
});
//속성 찾기
function findProperty(searchData) {
    const targetData = cssProperty.find((data) => data.name === searchData);
    if (targetData == null) {
        searchDesc.textContent = "해당 속성은 존재하지 않습니다. 다시 검색해 주세요.";
        return;
    }
    searchDesc.textContent = `${targetData.name} 속성은 ${targetData.desc}`;
}

원본 사이트 보기 원본 소스 보기