728x90
검색 이펙트
페이지에 리스트를 만들고, input박스를 만들어 사용자가 리스트의 내용을 검색할 수 있게 한 효과입니다.
> 사이트 미리보기
자바스크립트
해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. 먼저 검색영역(사용자가 검색하고 싶은 내용을 입력하는 곳)과, 목록리스트를 선택하는 선택자를 지정합니다. 이후 사용자가 입력한 키워드를 변수에 저장한 후, 리스트의 데이터 값에 사용자 키워드가 포함되는지 확인하며 리스트를 숨기고 보이게 합니다. 이를 위해 각 리스트에 data-name="" 속성을 부여하여 데이터 값을 비교할 수 있도록 합니다. 리스트의 테이터 값에 사용자 키워드가 포함되는지는, 문자열 메서드의 하나인 indexOf() 메서드를 사용합니다.
> 선택자
다중선택이 필요한 경우, querySelector가 아닌 querySelectorAll을 사용해야 조건에 해당하는 전체에서의 선택이 가능해집니다. 목록의 리스트는 여러개이므로 querySelectorAll을 사용합니다.
//선택자
const searchBox = document.querySelector(".search__box input"); //검색 영역
const searchList = document.querySelectorAll(".search__list ul li"); //목록 리스트
searchBox.addEventListener("keyup", () => {
const searchWord = searchBox.value; //사용자가 입력한 키워드
searchList.forEach(el => {
const cssName = el.dataset.name;
if(cssName.indexOf(searchWord)){ //키워드가 미포함된 경우 indexOf() 값(자릿값)으로 -1이 반환됨 => true
el.classList.add("hide"); //숨기기
} else {
el.classList.remove("hide"); //보이기 //키워드가 포함된 경우 indexOf() 값(자릿값)으로 0이 반환됨 => false => else 실행
}
//console.log(searchWord);
});
});
HTML
키워드와 리스트의 데이터를 비교하기 위해, 각 리스트에 data-name="" 속성을 부여합니다.
<li data-name="a"><strong>a</strong> : a 태그는 다른 페이지 이동을 설정합니다.</li>
<li data-name="abbr"><strong>abbr</strong> : abbr 태그는 줄임말이나 머리글자를 표현하는데 사용합니다.</li>
<li data-name="acronym"><strong>acronym</strong> : acronym 태그는 줄임말이나 머리글자를 표현하는 데에 사용합니다.</li>
<li data-name="address"><strong>address</strong> : address 태그는 가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타냅니다.</li>
<li data-name="applet"><strong>applet</strong> : applet 태그는 자바 애플릿을 보이게 하는 곳에 사용됩니다.</li>
<li data-name="area"><strong>area</strong> : area 태그는 이미지의 핫스팟 영역을 정의하고, 하이퍼링크를 추가할 수 있습니다. map 태그 안에서만 사용할 수 있습니다.</li>
<li data-name="article"><strong>article</strong> : article 태그는 문서, 페이지, 애플리케이션, 사이트 안에서 독립적인 구획을 만들 때 사용합니다.</li>
<li data-name="aside"><strong>aside</strong> : aside 태그는 문서의 주요 콘텐츠와 연관성을 가지고 있지만, 해당 콘텐츠와 분리시킨 영역을 만들고 싶을 때 사용합니다.</li>
<li data-name="audio"><strong>audio</strong> : audio 태그는 사용됩니다.</li>
<li data-name="b"><strong>b</strong> : b 태그는 사용됩니다.</li>
<li data-name="base"><strong>base</strong> : base 태그는 사용됩니다.</li>
<li data-name="bdi"><strong>bdi</strong> : bdi 태그는 사용됩니다.</li>
<li data-name="bdo"><strong>bdo</strong> : bdo 태그는 사용됩니다.</li>
<li data-name="bgsound"><strong>bgsound</strong> : bgsound 태그는 사용됩니다.</li>
<li data-name="big"><strong>big</strong> : big 태그는 사용됩니다.</li>
<li data-name="blink"><strong>blink</strong> : blink 태그는 사용됩니다.</li>
<li data-name="blockquoto"><strong>blockquoto</strong> : blockquoto 태그는 사용됩니다.</li>
<li data-name="body"><strong>body</strong> : body 태그는 문서의 콘텐츠 영역을 정의합니다.</li>
<li data-name="br"><strong>br</strong> : br 행을 바꾸고 싶을 때 사용합니다.(줄바꿈 기능)</li>
<li data-name="button"><strong>button</strong> : button 태그는 클릭이 가능한 버튼을 만듭니다.</li>
728x90
댓글