[자바스크립트 응용] 검색 효과 04_ 버튼 방식

검색 효과

검색 효과 네번째 시간입니다. 속성들을 각각 버튼형식처럼 만든 뒤 클릭하면 해당 속성의 설명이 나타나게 해보겠습니다.

---

원본 소스 보기 원본 사이트

---

■ n줄 요약

▶ 기존의 검색방식을 유지하되, 속성값들을 클릭할 수 있게 만들어 주는 기능을 추가합니다. find()메서드를 활용하므로 검색의 경우는 정확히 일치하지 않는 경우 속성값은 검색되지 않습니다.

JS 소스

const cssProperty = [
    { name: "accent-color", desc: " 일부 요소가 생성하는 사용자 인터페이스 컨트롤의 강조색을 지정합니다."},
    { name: "align-content", desc: " 콘텐츠 사이와 콘텐츠 주위 빈 공간을 교차축(flex박스) 또는 블록축(grid)을 따라 배치할지 속성할 수 있습니다."},
...이하 생략
];

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");         //설명창

    
// 출력하기
searchNum.innerHTML = cssProperty.length; // 프로퍼티 총 갯수 
cssProperty.map((e,i)=>{
// (= serachNum.innerHTML = index +1;)

searchList.innerHTML += `<span>${e.name}</span>`;
});

// 속성 클릭 작업
const searchListSpan = searchList.querySelectorAll('span');
searchListSpan.forEach((span) => {
span.addEventListener('click', (e) => {
    const searchWord = e.target.textContent;
    findProperty(searchWord);
    console.log(searchWord)
    window.scrollTo({left : 0, top : 0, behavior : "smooth"});
});
});

// 입력하기
searchBox.addEventListener("keyup", () => {
const searchWord = searchBox.value;     // 사용자가 입력한 값을 저장
// console.log(searchWord);

findProperty(searchWord);
});

// 클릭하기
//document.querySelectorAll(".search__list span").forEach(span => {
//span.addEventListener("click", () => {
    //const clickWord = span.innerText;
    //findProperty(clickWord);
//});
//});

// 속성 찾기
function findProperty(searchData) {
const targetData = cssProperty.find((data) => data.name === searchData);

if(targetData == null) {    // 데이터가 null일(존재하지 않을) 경우
    searchDesc.textContent = "해당 속성은 존재하지 않습니다. 다시 검색해주세요!";   // 데이터가 존재하지 않을 시 표시할 문구
    return;     // 종료의 의미 - F12 콘솔창 오류를 없애줌
};

searchDesc.textContent = targetData.desc;
};

■ 핵심 찍먹하기🪓

✔ js로 출력하기

html태그로 입력하지 않고 js에 배열안의 객체로 만들어 줍니다. 이후에 cssProperty라는 변수에 넣어준뒤 innerHTML을 이용해서 프로퍼티의 'name'속성을 입력해주고, ``(백틱)을 사용해주면 더 간편하게 할 수 있겠죠?

✔ find()

find메서드는 특정 조건을 만족하는 값이 존재한다면 그 값을 리턴하는 함수입니다. 이 메서드는 함수를 인자로 받고 조건을 만족하는 첫 번째 원소의 값을 리턴합니다.

■ 소스 분석하기🙄

버튼 형식으로 구성할 것이기 때문에 클릭이벤트를 만들어 주고, 해당 속성을 클릭시 'target'을 이용해서 대상의 값을 텍스트형식으로 'searchWord'라는 변수에 넣습니다. 이후 이 값을 'findProperty()'함수의 값으로 넣어줍니다.
'window.scrollTo({left : 0, top : 0, behavior : "smooth"});'는 그냥 클릭시 맨위로 부드럽게 이동하는 속성입니다.
클릭 이외에도 검색창 입력시 'keyup'이벤트를 통해 입력값을 'searchWord'라는 변수에 마찬가지로 넣습니다.
이렇게 전달받은 searchWord값은 findProperty()함수의 매개변수로 넘겨지게 되고, 이 함수내에서 'searchData'라는 이름으로 사용되겠군요.
find메서드를 통해서 cssProperty중에 사용자가 입력 or 클릭한 이름과 같은 data.name을 가진 값을 'targetData' 변수에 넣습니다.
그럼 이 데이터의 desc값(해당 속성의 설명)을 'searchDesc'(설명창)에 텍스트형식으로 입력하면 됩니다.

※ 여기서 주의할 점!! 만약 데이터가 없는 경우는...?
-> if문을 이용해서 데이터가 없는경우(null)에 해당할 멘트를 넣어줍니다. 그리고 'return'을 사용해 종료의 의미를 가지게 됩니다.

😭 이번 효과는 차근차근 하나씩 순서대로 콘솔로그로 확인하시면서 한다면 이해하는데 수월할거에요 😭

---

🙇‍♀️ 틀린 점에 대한 지적은 언제나 환영합니다 🙇‍♂️