searchEffect - 04

스크립트를 이용한 서치효과 만들기 04

스크립트를 이용하여 HTML 태그를 검색하는 효과를 만들 수 있습니다.

원본 소스 보기

Script

const cssProperty = [
    { name: "accent-color", desc: "특정 요소에 색상을 지정할 때 사용됩니다." },
    { name: "align-content", desc: "콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다." },
    { name: "align-items", desc: "콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다." },
                ⁝
];
//선택자
const searchList = document.querySelector(".search__list");     //속성 리스트
const searchNum = document.querySelector(".search__info .num"); //속성 갯수
const searchBox = document.querySelector(".search__box input"); //검색창
const searchDesc = document.querySelector(".search__desc");     //속성 설명

//출력하기
cssProperty.map((element, index) => {
    // searchList.innerHTML += "<li>" + element.name +  ":" + element.desc + "</li>";
    searchList.innerHTML += `<span>${element.name}</span>`; //name의 키값을 불러올 수 있음
    searchNum.innerText = index + 1;        //index값은 0부터 시작하기때문에 1을 더해줌
});

//입력하기
searchBox.addEventListener("keyup", () => {
    const searchWord = searchBox.value;     //사용자가 input박스에 넣은 값
    findProperty(searchWord);
});

//클릭해서 속성 찾기
searchList.addEventListener("click", (e) => {
    findProperty(e.target.innerHTML);   //e 안에 있는 텍스트 속성을 타겟해서 매개변수로 잡음
})

//속성 찾기
function findProperty(searchData){  //받은 매개변수값을 searchData값에 저장
    const targetData = cssProperty.find((data) => data.name === searchData);
    if(targetData == null || targetData == undefined){  //null과 undefined 둘 다 적어줌
        searchDesc.textContent = "해당 속성은 존재하지 않습니다. 다시 검색해주세요!";
        return;     // 종료의 의미도 있음, 결과값을 출력도 하지만...
    } 
    searchDesc.textContent = targetData.desc;
    
};

HTML

<main id="main">
    <div class="search_wrap">
        <span>find()를 이용하여 속성을 검색하면 설명 보여주기</span>
        <h1>CSS 속성 검색하기</h1>
        <div class="search__box">
            <label for="search">검색하기</label>
            <input type="text" id="search" placeholder="CSS 속성 및 유형을 입력해주세요!">
        </div>
        <div class="search__desc">
            속성을 검색하시면 설명이 표시됩니다~
        </div>
        <div class="search__info">
            <div>전체 속성 갯수 : <span class="num"></span></div>
        </div>
        <div class="search__list">

        </div>
    </div>
</main>