📚 사용자 검색 기능을 구현
<!DOCTYPE html>
<html lang="ko-KR">
<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>Search Bar</title>
<link rel="stylesheet" href="style.css" />
<script src="main.js" defer></script>
</head>
<body>
<form class="search-wrapper">
<h2>사용자 검색</h2>
<label for="search" class="a11yHidden">사용자 검색</label>
<input type="search" id="search" data-search />
</form>
<div class="user-cards" data-user-cards-container></div>
<template data-user-template>
<div class="card">
<div class="header" data-header></div>
<div class="body" data-body></div>
</div>
</template>
</body>
</html>
⭐️ <template> 태그란?
<template>은 미리 정의된 HTML을 복제하여 여러 번 사용할 수 있는 템플릿 역할을 합니다.
브라우저에 렌더링되지 않고 JavaScript 코드에서 템플릿을 복제하여 동적으로 요소를 생성하는 데 사용됩니다.
// main.js
const userCardTemplate = document.querySelector("[data-user-template]");
const userCardContainer = document.querySelector("[data-user-cards-container]");
const searchInput = document.querySelector("[data-search]");
// 사용자 데이터 배열
let users = [];
// 검색어에 따라 사용자 필터링하는 함수
function filterUsers(value) {
users.forEach((user) => {
const isVisible =
user.name.toLowerCase().includes(value) ||
user.email.toLowerCase().includes(value);
user.element.classList.toggle("hide", !isVisible);
});
}
// 검색 입력 이벤트 리스너 등록
searchInput.addEventListener("input", (e) => {
const value = e.target.value.toLowerCase();
filterUsers(value);
});
// 사용자 데이터 가져오기
fetch("https://jsonplaceholder.typicode.com/users")
.then((res) => res.json())
.then((data) => {
// 데이터를 가지고 사용자 카드 생성
users = data.map((user) => {
// 템플릿의 내용을 복제하여 새로운 노드를 생성, true 매개변수는 하위 요소들도 함께 복제하도록 지정
const card = userCardTemplate.content.cloneNode(true).children[0];
const header = card.querySelector("[data-header]");
const body = card.querySelector("[data-body]");
//선택된 헤더와 바디 요소의 textContent를 사용자의 이름과 이메일로 설정. 이를 통해 해당 요소들에 데이터가 표시
header.textContent = user.name;
body.textContent = user.email;
//생성된 카드 요소(card)를 사용자 카드 컨테이너(userCardContainer)에 추가
userCardContainer.append(card);
//생성한 사용자 객체를 반환
return { name: user.name, email: user.email, element: card };
});
})
.catch((err) => console.error(err));⭐️ Node.cloneNode() 란?
Node 객체의 메서드로, 해당 노드를 복제하는 역할을 합니다. 즉, 기존의 노드를 복제하여 동일한 구조와 내용을 가진 새로운 노드를 생성합니다. cloneNode() 메서드는 복제하려는 노드를 매개변수로 받고, 복제된 노드를 반환합니다. 이 메서드는 단순한 복사가 아니라 깊은 복사(deep copy)를 수행합니다. 즉, 복제된 노드는 원본 노드의 하위 요소들을 모두 포함하게 됩니다.
const card = userCardTemplate.content.cloneNode(true).children[0];
HTML 템플릿(userCardTemplate)의 내용을 복제하여 새로운 노드를 생성합니다. cloneNode(true)에서 true는 하위 요소들도 함께 복제하도록 지정한 것입니다. children[0]은 템플릿 내의 첫 번째 자식 요소를 선택합니다. 이로써 새로운 카드 요소(card)가 생성됩니다.
참고 : How To Create A Search Bar In JavaScript
'Javascript' 카테고리의 다른 글
| JavaScript로 구현하는 JadenCase 문자열 변환 함수 (0) | 2023.04.14 |
|---|---|
| map() 함수와 Number 함수를 사용한 배열 변환 (0) | 2023.04.14 |
| forEach, map, reduce, filter (0) | 2022.11.13 |
