검색 상자에 키워드를 입력하면 목록에서 일치하는 링크만 실시간으로 걸러 보여주는 기능은 웹사이트의 사용자 경험을 크게 높여 줍니다. 이 글에서는 순수 JavaScript만으로 링크를 필터링하는 검색 메뉴를 만드는 방법을 전체 예제 코드와 함께 자세히 살펴보겠습니다.
전체 예제 코드
다음은 왼쪽 메뉴의 검색 상자에 입력된 값에 따라 동물 링크 목록을 필터링하는 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: monospace;
}
.outer {
display: flex;
}
h2 {
text-align: center;
}
.menu-left {
flex: 35%;
padding: 15px 0;
}
.menu-left h2 {
padding-left: 8px;
}
.resultSide {
flex: 55%;
padding: 15px;
background-color: rgb(199, 199, 255);
}
.resultSide p {
font-size: 25px;
}
.searchBox {
font-size: 16px;
padding: 11px;
border: 2px solid black;
}
/* 왼쪽 열 내비게이션 메뉴 스타일 */
.animalMenu {
list-style-type: none;
margin: 0px;
background-color: lightgoldenrodyellow;
}
.animalMenu li a {
padding: 12px;
text-decoration: none;
color: black;
display: block;
}
li {
font-size: 25px;
}
.animalMenu li a:hover {
background-color: rgb(255, 112, 112);
}
</style>
</head>
<body>
<h2>Search Animals</h2>
<div class="outer">
<div class="menu-left">
<h2 style="background-color: lightgoldenrodyellow;">Menu</h2>
<input type="text" maxlength="20" size="20" class="searchBox" placeholder="Search about animal...." />
<ul class="animalMenu">
<li><a href="#">Lion</a></li>
<li><a href="#">Giraffe</a></li>
<li><a href="#">Camel</a></li>
<li><a href="#">Tiger</a></li>
<li><a href="#">Cat</a></li>
</ul>
</div>
<div class="resultSide">
<h2>Page Header</h2>
<p>Some random text inside this box to demonstrate the example code</p>
<p>Some random text inside this box to demonstrate the example code</p>
</div>
</div>
<script>
let searchBox = document.querySelector(".searchBox");
let filterSearch, ulItem, liItem, links;
function processResults() {
filterSearch = searchBox.value.toUpperCase();
ulItem = document.querySelector(".animalMenu");
liItem = ulItem.getElementsByTagName("li");
Array.from(liItem).forEach(element => {
links = element.getElementsByTagName("a")[0];
if (links.innerHTML.toUpperCase().indexOf(filterSearch) > -1) {
element.style.display = "";
} else {
element.style.display = "none";
}
});
}
searchBox.addEventListener("keyup", () => {
processResults();
});
</script>
</body>
</html>
코드 작동 원리
이 코드의 핵심 로직은 다음과 같습니다.
- 입력 이벤트 감지: 검색 상자에서
keyup이벤트가 발생할 때마다processResults()함수가 호출됩니다. - 대소문자 무시 비교: 입력값을
toUpperCase()로 대문자로 변환한 뒤 링크 텍스트와 비교하므로, 대소문자 구분 없이 검색할 수 있습니다. - 항목 표시 및 숨김: 각 <li> 요소 안의 링크 텍스트에 검색어가 포함되어 있으면 해당 항목을 그대로 표시하고(
display: ""), 포함되어 있지 않으면 화면에서 숨깁니다(display: "none").
실행 결과
위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.
검색 상자에 키워드를 입력하면 일치하는 동물 링크만 필터링되어 실시간으로 표시됩니다.
