728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>검색 이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/search.css">
</head>
<body class="pink">
<header id="header">
<ul>
<li class="active"><a href="mouseEffect01.html">1</a></li>
<li><a href="mouseEffect02.html">2</a></li>
<li><a href="mouseEffect03.html">3</a></li>
<li><a href="mouseEffect04.html">4</a></li>
<li><a href="mouseEffect05.html">5</a></li>
<li><a href="mouseEffect06.html">6</a></li>
</ul>
</header>
<!-- //header -->
<main id="main">
<div class="search__wrap">
<div class="search__header">
<h2 class="title">자바스크립트</h2>
</div>
<div class="search__conts">
<hgroup>
<h3>CSS 속성 검색하기</h3>
<h4>indexOf() / search()</h4>
</hgroup>
<div class="search__box">
<label for="search">검색하기</label>
<input type="text" name="search" id="search" placeholder="CSS 속성을 입력해주세요!">
</div>
<div class="search__info">
<div>
CSS 속성 갯수 : <span>0</span>개
</div>
</div>
<div class="search__list">
<ul>
<li data-name="align-content"><strong>align-content</strong> : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.</li>
<li data-name="align-items"><strong>align-items</strong> : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다.</li>
<li data-name="align-self"><strong>align-self</strong> : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다.</li>
<li data-name="all"><strong>all</strong> : 요소의 속성을 초기화 또는 상속을 설정합니다.</li>
<li data-name="animation"><strong>animation</strong> : 애니메이션과 관련된 속성을 일괄적으로 설정합니다.</li>
<li data-name="animation-delay"><strong>animation-delay</strong> : 애니메이션 지연 시간을 설정합니다.</li>
<li data-name="animation-direction"><strong>animation-direction</strong> : 애니메이션 움직임 방향을 설정합니다.</li>
<li data-name="animation-duration"><strong>animation-duration</strong> : 애니메이션 움직임 시간을 설정합니다.</li>
<li data-name="animation-fill-mode"><strong>animation-fill-mode</strong> : 애니메이션이 끝난 후의 상태를 설정합니다.</li>
<li data-name="animation-iteration-count"><strong>animation-iteration-count</strong> : 애니메이션 반복 횟수 설정합니다.</li>
<li data-name="animation-name"><strong>animation-name</strong> : 애니메이션 keyframe 이름을 설정합니다.</li>
<li data-name="animation-play-state"><strong>animation-play-state</strong> : 애니메이션 진행상태를 설정합니다.</li>
<li data-name="animation-timing-function"><strong>animation-timing-function</strong> : 애니메이션 움직임의 속도를 설정합니다.</li>
</ul>
</div>
</div>
</div>
</main>
<footer id="footer">
<a href="mailto:ghkddn132@naver.com">ghkddn132@naver.com</a>
</footer>
<script>
//선택자
const searchBox = document.querySelector(".search__box input"); //검색
const searchList = document.querySelectorAll(".search__list li"); // 목록 리스트
//검색
searchBox.addEventListener("keyup", () =>{
const userWord = searchBox.value; //사용자가 입력한 키워드
searchList.forEach(el => {
// const cssName = el.getAttribute("data-name"); //방법1
const cssName = el.dataset.name; //방법2
if(cssName.indexOf(userWord)){ //값을 입력할때 indexOf의 첫번째 위치값을 반환한다. 0 = false
//위치값이 0이아닐때는 다 트루 이므로 다숨겨줍니다.
el.classList.add("hide");
} else {
//위치값이 0일때 는 펄스 이므로 지워줍니다.
el.classList.remove("hide");
}
});
});
</script>
</body>
</html> <script>
//선택자
const searchBox = document.querySelector(".search__box input"); //검색
const searchList = document.querySelectorAll(".search__list li"); // 목록 리스트
//검색
searchBox.addEventListener("keyup", () =>{
const userWord = searchBox.value; //사용자가 입력한 키워드
searchList.forEach(el => {
// const cssName = el.getAttribute("data-name"); //방법1
const cssName = el.dataset.name; //방법2
if(cssName.indexOf(userWord)){ //값을 입력할때 indexOf의 첫번째 위치값을 반환한다. 0 = false
//위치값이 0이아닐때는 다 트루 이므로 다숨겨줍니다.
el.classList.add("hide");
} else {
//위치값이 0일때 는 펄스 이므로 지워줍니다.
el.classList.remove("hide");
}
});
});
</script>·우선 사용자가 정보를 입력받는곳과 안에 있는 정보리스트를 가져와야 합니다 그래서 변수를 지정해 줍니다.
·그후 사용자의 정보를 입력받는곳에 'keyup'을 사용하여 사용자가 키를 입력 했을때 그값을 받아서 상수로 저장 하도록 합니다.
·그후 forEach문을 이용하여 정보리스트에 data-name을 상수로 저장 해준후 조건문으로 사용자가 입력한 값과 정보리스트의 data-name의 위치값을 비교하여 그위치 값이 0이면 else를 실행해주고 아니면 트루를 실행해줍니다.
그러면 사용자가 입력한 단어와 같은 단어들 만 보여 줍니다.
※사용된 요소및 메서드
| indexOf() | 문자열에서 특정 문자열 또는 문자의 첫 번째 인덱스를 반환하는 메서드입니다. 만약 문자열 안에 찾으려는 문자열이 없으면 -1을 반환합니다. |
| search() | 문자열에서 정규식과 일치하는 첫 번째 위치를 반환하는 자바스크립트의 메서드입니다. indexOf()와 달리, search()는 정규식을 사용하여 문자열에서 패턴을 검색합니다. |
| keyup | 자바스크립트에서 발생하는 이벤트 중 하나로, 키보드의 키를 눌렀다가 놓았을 때 발생합니다. |
| getAttribute() | HTML 요소에서 지정된 속성의 값을 가져오는 자바스크립트의 메서드입니다. |
| dataset | HTML 요소에서 data-로 시작하는 모든 속성을 가져오는 자바스크립트의 속성(property)입니다. |