<HTML>
<h2>실시간 검색 필터</h2>
<input
type="text"
id="search-input"
placeholder="여기에 검색어를 입력해주세요."
>
<ul id="item-list">
<li>사과</li>
<li>바나나</li>
<li>오렌지</li>
<li>망고</li>
<li>포도</li>
<li>키위</li>
<li>체리</li>
<li>딸기</li>
<li>기러기</li>
<li>사진</li>
</ul>
<div id="no-result">검색 결과가 없습니다.</div>
검색창에 입력한 검색어가 아이템리스트 중에 동일한 단어가 있으면 리스트에 반환을 하도록 할 것이다.
'검색 결과가 없습니다.'는 검색창에 입력한 검색어가 아치템 리스트에 맞는게 없을 경우 문자을 반환하도록 만들 것이다.
document.addEventListener('DOMContentLoaded', function() {
const inputField = document.getElementById('search-input');
const list = document.getElementById('item-list');
const items = document.querySelectorAll('li');
const noResult = document.getElementById('no-result');먼저 웹문서가 모두 로드된 이후 실행할 JS이벤트를 등록한다.
HTML요소드을 getElementById와 querySelectorAll을 사용해 가져온다.
inputField.addEventListener('input', function() {
let value = inputField.value.toLowerCase();
let visibleItemsCount = 0;- 검색어 입력 이벤트 핸들러 정의 한다.
- input에 입력되는 value값을 소문자로 전환해서 value 변수에 할당한다.
- 필터링 적용 후 화면에 표시되는 항목의 개수를 카운트을 하기 위해 변수를 초기화 한다.
items.forEach(item => {
if (item.textContent.toLowerCase().includes(value)) {
item.style.display = '';
visibleItemsCount++;
} else {
item.style.display = 'none';
}
});
noResult.style.display = visibleItemsCount > 0 ? 'none' : 'block';- items는 list <li> 요소이다. forEach메서드를 사용하여 각 item에 반복 적용을 한다.
- item.textContent로 텍스트 내용 을가져온다 toLowerCase() 텍스트 내용을 소문자로 변환하여,
- 대소문자 구분없이 비교 가능하다.
- includes(value)로 value가 item.textContent에 포함되어 있는지 확인한다. 포함되면
- true
- item요소에 display속성을 빈배열로 설정하면 요소가 CSS에서 정의된 기본 display값으로 복원한다.
- visibleItemsCount++는 화면에 표시되는 요소의 개수를 세기 위해 후위연산자를 사용하단.
- false
- display 속성을 none으로 처리해서 요소를 화면에 숨긴다.
- noResult.style.display = visibleItemsCount > 0 ? 'none' : 'block';
- 필터링 결과에 따라 아무 항목도 표시되지 않는 경우를 처리
- visibleItemsCount가 0보다 크면 noResult 요소를 숨기고(display: none),
그렇지 않으면 noResult 요소를 화면에 표시 - display: block 이 코드는 검색 결과가 없을 때 "결과 없음" 메시지를 보여주는 데 사용
See the Pen Untitled by als5855 (@als5855) on CodePen.
'JavaScript' 카테고리의 다른 글
| JavaScript <event 갤러리> (0) | 2024.06.11 |
|---|---|
| JavaScript <event> 이벤트 버블링과 캡쳐 (0) | 2024.06.10 |
| JavaScript <event 3> 기본 행동 방지 이벤트 (0) | 2024.06.09 |
| JavaScript <event 2> 색상 변경 이벤트 (0) | 2024.06.09 |
| JavaScript <event 1> (0) | 2024.06.07 |
