서치 이펙트
자바스크립트를 이용해서 HTML과 CSS, JAVASCRIPT의 요소를 검색하는 효과 만들기입니다.
서치 이펙트 01
indexOf( ) 메소드를 이용해서 HTML 태그를 검색하는 효과입니다.
서치 효과는 문자열에서 특정 문자의 위치를 찾고 숫자를 반환해주는 indexOf( ) 메소드를 사용해 사용자의 검색 키워드와 일치하는 문자를 간추려서 보여주도록 합니다.
indexOf( ) 메소드에 대한 자세한 설명은 이 곳에서 보실 수 있습니다.
1. 검색 목록 만들기
//CSS
<style>
.search__wrap {
max-width: 1400px;
margin: 0 auto;
border: 3px solid var(--htmlColor);
border-radius: 20px;
background-color: #f1f3f6;
padding: 30px;
text-align: center;
}
.search__wrap > span {
font-size: 20px;
margin-bottom: 20px;
display: inline-block;
}
.search__wrap > h1 {
font-family: 'Tmon';
color: var(--htmlColor);
font-size: 6vw;
margin-bottom: 10px;
}
.search__box {
margin-bottom: 20px;
}
.search__box label {
position:absolute;
clip:rect(0 0 0 0);
width:1px;
height:1px;
margin:-1px;
overflow:hidden
}
.search__box input {
border: 2px solid var(--htmlColor);
padding: 15px 40px;
width: 70%;
border-radius: 50px;
font-size: 20px;
}
.search__list {}
.search__list li {
text-align: left;
line-height: 1.7;
}
<style>
//HTML
<div class="search__wrap">
<span>indexOf()를 이용하여 HTML 태그 검색하기</span>
<h1>HTML 태그 검색하기</h1>
<div class="search__box">
<label for="search">검색하기</label>
<input type="text" id="search" placeholder="HTML 태그를 입력해주세요!">
</div>
<div class="search__list">
<div class="html">
<ul>
<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 태그는 이미지의 핫스팟 영역을 정의하고 하이퍼링크를 추가할 수 있습니다.</li>
<li data-name="article"><strong>article</strong> : article 태그는 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다.</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 태그는 문서 안의 모든 상대 URL이 사용할 기준 URL을 지정합니다. </li>
<li data-name="bdi"><strong>bdi</strong> : bdi 태그는 주위의 텍스트들과는 다른 방향으로 써지는 텍스트 영역을 정의할 때 사용합니다. </li>
<li data-name="bdo"><strong>bdo</strong> : bdo 태그는 현재 텍스트의 쓰기 방향을 덮어쓰고 다른 방향으로 렌더링 할 때 사용합니다. </li>
<li data-name="big"><strong>big</strong> : big 태그는 텍스트의 크기를 크게 설정합니다. </li>
<li data-name="blockquote"><strong>blockquote</strong> : blockquote 태그는 긴 문장의 인용문을 설정합니다. </li>
</ul>
</div>
</div>
</div>
서치를 하기 위한 검색창은 <input>을 사용합니다. <input>은 사용자가 입력할 수 있는 창을 만들어주며,
<label>을 사용해 HTML 작성규칙을 지킬 수 있습니다.
<label>의 for와 <input>의 id를 같게 해주면 둘을 일치시킬 수 있습니다.
검색 목록 작성시 'data-'를 사용하는데, 'data-'는 특정한 데이터를 DOM 요소에 저장해줍니다.
따라서 위의 'data-name'은 name에 각각의 검색 목록 데이터가 들어가게 됩니다. 이 데이터는 스크립트를 이용해
불러올 수 있습니다.
2. 선택자
//선택자
<script>
const searchBox = document.querySelector(".search__box input"); //검색 영역
const searchList = document.querySelectorAll(".search__list ul li"); //목록 리스트
</script>
작성한 검색 목록을 불러오기 위한 선택자를 작성합니다. searchList의 경우 여러개의 목록을 다뤄야 하기 때문에 querySelectorAll을 사용합니다.
3. 검색 데이터 저장
<script>
const searchBox = document.querySelector(".search__box input"); //검색 영역
const searchList = document.querySelectorAll(".search__list ul li"); //목록 리스트
searchBox.addEventListener("keyup", () => {
const searchWord = searchBox.value; //사용자가 입력한 키워드
});
</script>
다음은 검색창에 키워드를 적을시 해당 키워드의 데이터를 저장하는 단계입니다.
addEventlistener을 사용해 입력시 이벤트가 발동하도록 합니다. 이 때 'value'는 searchBox 선택자, 즉 검색한 데이터가 저장되는 곳 입니다.
"keyup( )"은 키보드 입력이 끝난 후 발생되는 이벤트입니다. 이 외에 "keydown( )"은 키 입력 시 발생하며, "keypress( )"는 키를 누르고 있는 동안 계속 발동합니다.
4. 검색 데이터 출력
//CSS
<style>
.search__list li.hide {
display: none;
}
</style>
//JAVASCRIPT
<script>
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)){
el.classList.add("hide");
} else {
el.classList.remove("hide"); //보임 (indexOf값이 0이 되는 값만 hide를 지워줌)
}
});
});
</script>
마지막으로 검색 데이터 키워드와 검색 목록의 값을 비교해서 선택적으로 출력해주는 작업입니다.
if문을 사용해서 키워드가 일치하지 않으면 hide class를 추가해 숨기고 일치한 것은 hide class를 제거해서 출력해주며,
이 후 작업은 forEach문에 의해 모든 일치하는 데이터가 나올때까지 반복됩니다.
이 때, HTML에서 저장된 name값은 el.dataset.name으로 불러오게 됩니다.
검색 키워드와 검색 목록의 값의 비교는 indexOf( ) 메소드를 사용합니다.
indexOf( )에 검색 키워드가 들어가면 우선 true 작업에 의해 hide class가 적용되서 모두 숨겨지게 되는데,
이 때 cssName에 저장된 목록값과 저장된 검색 키워드가 일치하게 되면 0의 값이 반환이 되고 그렇게 false값이 출력되면서
hide class가 제거됩니다.
댓글