SearchEffect IndexOf( )

const searchBox = document.querySelector("#search-box");     //search-box를 변수에 저장
const cssList = document.querySelectorAll(".list ul li");    //다수의 li를 변수에 저장

searchBox.addEventListener("keyup", () => {      // input 박스를 클릭했을 때 이벤트 설정
  const searchWorld = searchBox.value;           // 사용자가 입력한 데이터 저장소 변수에 저장

  //console.log(searchWorld);
  cssList.forEach(el => {            //다수의 li를
    console.log(el.dataset.name)    

    const cssName = el.dataset.name; //CSS 속성 값을 변수에 저장

    if(cssName.indexOf(searchWorld)){     //사용자가 입력한 값에 데이터가 있는지 확인
      el.classList.add("hide");           //데이터가 있으면 클래스 hide를 추가
    } else {
      el.classList.remove("hide")		  //데이터가 없으면 클래스 hide를 삭제
    }
  })
})

indexOf() 참조

indexOf() 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 없으면 -1을 반환하는 메서드입니다.

indexOf() 메서드를 사용하여 사용자가 입력한 데이터의 값과 일치하는 데이터 값을 보여주는 사이트를 만들어보았습니다.

 

자바스크립트

 

https://parkjongho1.github.io/webs_ho/javascript/effect/searchEffect01.html

Search Effect