JavaScript로 검색 필터 목록 만드는 방법 (실시간 리스트 필터링 구현하기)

JavaScript를 활용하면 검색 입력창에 텍스트를 입력하는 순간 목록 항목을 실시간으로 필터링하는 기능을 손쉽게 구현할 수 있습니다. 이번 글에서는 keyup 이벤트와 간단한 문자열 비교 로직만으로 동물 이름 목록을 검색·필터링하는 예제를 살펴보겠습니다.

동작 원리

필터링의 핵심 흐름은 다음과 같습니다.

사용자가 입력창에 키를 입력하면 onkeyup 이벤트가 발생하여 필터 함수가 호출됩니다.
입력된 값을 toUpperCase()로 대문자로 변환해 대소문자 구분 없이 비교합니다.
목록의 각 항목(<li>)을 순회하며 텍스트에 입력값이 포함되어 있는지 확인합니다.
일치하면 해당 항목을 그대로 표시하고, 일치하지 않으면 display: none으로 숨깁니다.

전체 예제 코드

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    * {
        box-sizing: border-box;
    }
    .searchInput {
        width: 100%;
        font-size: 16px;
        padding: 12px 20px 12px 40px;
        border: 2px solid grey;
        margin-bottom: 12px;
    }
    .animalUL {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    .animalUL li a {
        border-top: 1px solid rgb(0, 0, 0);
        margin-top: -1px;
        background-color: #f6f6f6;
        padding: 12px;
        text-decoration: none;
        font-size: 18px;
        color: black;
        display: block;
    }
    .animalUL li a:hover:not(.header) {
        background-color: #eee;
    }
</style>
</head>
<body>
<h1>Filter list example</h1>
<input type="text" class="searchInput" onkeyup="filterFunction()" placeholder="Search for animals" title="Type in a name"/>
<ul class="animalUL">
<li><a href="#">Cat</a></li>
<li><a href="#">Cheetah</a></li>
<li><a href="#">Dog</a></li>
<li><a href="#">Giraffe</a></li>
<li><a href="#">Lion</a></li>
<li><a href="#">Leopard</a></li>
<li><a href="#">llama</a></li>
</ul>
<script>
    function filterFunction() {
        var input, filter, ul, li, a, i, value;
        input = document.querySelector(".searchInput");
        filter = input.value.toUpperCase();
        ul = document.querySelector(".animalUL");
        li = ul.getElementsByTagName("li");
        for (i = 0; i < li.length; i++) {
            a = li[i].getElementsByTagName("a")[0];
            value = a.textContent || a.innerText;
            if (value.toUpperCase().indexOf(filter) > -1) {
                li[i].style.display = "";
            } else {
                li[i].style.display = "none";
            }
        }
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

JavaScript로 검색 필터 목록 만드는 방법 (실시간 리스트 필터링 구현하기)

검색어 입력 시

검색 입력창에 특정 단어를 입력하면 일치하는 항목만 남고 나머지는 자동으로 사라집니다. 예를 들어 "L"을 입력하면 Lion, Leopard, llama처럼 L로 시작하는(또는 L을 포함하는) 항목만 표시됩니다.

JavaScript로 검색 필터 목록 만드는 방법 (실시간 리스트 필터링 구현하기)

코드 핵심 포인트 정리

document.querySelector(): 클래스명을 이용해 입력창과 목록 요소를 쉽게 선택합니다.
toUpperCase(): 입력값과 항목 텍스트를 모두 대문자로 변환하여 대소문자를 무시한 비교가 가능하게 합니다.
indexOf(filter) > -1: 부분 일치 검색을 지원하므로 단어의 일부만 입력해도 필터링됩니다.
style.display 제어: 일치 여부에 따라 항목을 보이거나 숨겨 실시간 필터링 효과를 만듭니다.

이 방식은 별도의 라이브러리 없이 순수 JavaScript와 CSS만으로 구현할 수 있어 가볍고, 연락처 목록, 상품 검색, 메뉴 필터 등 다양한 UI에 응용하기 좋습니다.