CSS와 JavaScript를 활용하면 드롭다운 메뉴 안에서 원하는 항목을 실시간으로 검색하고 필터링하는 기능을 손쉽게 구현할 수 있습니다. 아래는 전체 예제 코드와 함께 각 부분의 동작 방식까지 상세히 설명합니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: rgb(76, 78, 175);
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #4f3e8e;
}
.searchField {
box-sizing: border-box;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
.searchField:focus {outline: 3px solid #ddd;}
.dropdown {
position: relative;
display: inline-block;
}
.dropdownList {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}
.dropdownList a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
</head>
<body>
<h1>Search/filterText Dropdown Example</h1>
<div class="dropdown">
<button class="dropbtn" onclick="showDropList()">Dropdown</button>
<div id="myDropdown" class="dropdownList">
<input type="text" placeholder="Search.." class="searchField">
<a href="#">Cow</a>
<a href="#">Cat</a>
<a href="#">Dog</a>
<a href="#">Giraffe</a>
<a href="#">Lion</a>
<a href="#">Leopard</a>
<a href="#">Cheetah</a>
</div>
</div>
<script>
function showDropList(){
let dropDiv = document.querySelector('.dropdownList');
if(dropDiv.style.display==="block"){
dropDiv.style.display = "";
} else {
dropDiv.style.display = "block";
}
}
document.querySelector('.searchField').addEventListener('keyup',filterDropdown);
function filterDropdown() {
var inputSearch, filterText, ul, li, links, i,div;
inputSearch = document.querySelector(".searchField");
filterText = inputSearch.value.toUpperCase();
div = document.getElementById("myDropdown");
links = div.getElementsByTagName("a");
for (i = 0; i < links.length; i++) {
txtValue = links[i].textContent || links[i].innerText;
if (txtValue.toUpperCase().indexOf(filterText) > -1) {
links[i].style.display = "";
} else {
links[i].style.display = "none";
}
}
}
</script>
</body>
</html>
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 화면이 출력됩니다.
드롭다운 버튼을 클릭한 후 검색 필드에 텍스트를 입력하면, 입력값과 일치하는 항목만 남기고 나머지는 자동으로 숨겨집니다.
코드 동작 방식
1. 드롭다운 열기 및 닫기: showDropList() 함수는 버튼 클릭 시 .dropdownList 요소의 현재 display 값을 확인합니다. 값이 block이라면 초기화하여 목록을 닫고, 그렇지 않다면 block으로 설정해 목록을 열어줍니다.
2. 실시간 검색 필터링: 검색 입력창(.searchField)에 keyup 이벤트가 발생할 때마다 filterDropdown() 함수가 호출됩니다. 이 함수는 사용자가 입력한 텍스트를 대문자로 변환한 후, 드롭다운 내부의 모든 링크(<a> 태그)의 텍스트와 비교합니다. 입력값을 포함하는 항목은 그대로 표시되고, 포함하지 않는 항목은 display: none 처리되어 목록에서 사라집니다.
3. 대소문자 무관 검색: 입력값과 항목 텍스트 모두 toUpperCase()로 변환한 후 비교하므로, 사용자가 대문자나 소문자를 어떻게 입력했더라도 동일한 검색 결과를 얻을 수 있습니다.