웹 개발에서 사용자가 원하는 데이터를 빠르게 찾을 수 있도록 돕는 검색 필터 테이블은 매우 유용한 UI 요소입니다. 이 글에서는 순수 JavaScript만을 사용하여 입력 필드에 타이핑하는 즉시 테이블 행이 실시간으로 필터링되는 기능을 구현하는 방법을 알아보겠습니다.
동작 원리
필터 테이블의 핵심 로직은 다음과 같습니다.
- 검색 입력 필드에
keyup이벤트 리스너를 등록합니다. - 사용자가 입력한 값을 대문자로 변환하여 저장합니다.
- 테이블의 모든 행(
<tr>)을 순회하면서 첫 번째 셀(<td>)의 텍스트와 비교합니다. - 입력값이 포함되어 있으면 해당 행을 표시하고, 없으면 화면에서 숨깁니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
* {
box-sizing: border-box;
}
.searchField {
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
.birthDayTable {
border-collapse: collapse;
width: 100%;
font-size: 18px;
}
.birthDayTable th, .birthDayTable td {
text-align: left;
padding: 12px;
}
.birthDayTable tr {
border-bottom: 4px solid #ddd;
}
.birthDayTable tr.header, .birthDayTable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h1>Filter table example</h1>
<input type="text" class="searchField" placeholder="Friend Name:" />
<table class="birthDayTable">
<tr class="header">
<th style="width:60%;">Friends</th>
<th style="width:40%;">Birthday Month</th>
</tr>
<tr>
<td>Shawn</td>
<td>January</td>
</tr>
<tr>
<td>Ron</td>
<td>March</td>
</tr>
<tr>
<td>Jack</td>
<td>December</td>
</tr>
<tr>
<td>Simon</td>
<td>February</td>
</tr>
<tr>
<td>Ricky</td>
<td>November</td>
</tr>
</table>
<script>
document.querySelector(".searchField").addEventListener("keyup", searchFunction);
function searchFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.querySelector(".searchField");
filter = input.value.toUpperCase();
table = document.querySelector(".birthDayTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</body>
</html>코드 상세 설명
1. CSS 스타일링
검색 필드(.searchField)는 화면 전체 너비를 차지하도록 설정했으며, 테이블은 border-collapse: collapse를 적용해 깔끔한 테두리를 만들었습니다. 또한 :hover 선택자를 활용해 마우스를 올린 행의 배경색이 변경되도록 하여 사용자 경험을 높였습니다.
2. HTML 구조
친구 이름과 생일 월을 담은 간단한 테이블을 구성하고, 그 위에 검색용 <input> 요소를 배치했습니다.
3. JavaScript 필터링 로직
keyup 이벤트가 발생할 때마다 searchFunction()이 실행됩니다. 입력값과 셀의 텍스트를 모두 toUpperCase()로 변환해 대소문자 구분 없이 비교하며, 일치하지 않는 행은 display: none 처리하여 화면에서 제거됩니다.
실행 결과
위 코드를 실행하면 친구 이름과 생일 월이 나열된 테이블 위에 검색 입력창이 표시됩니다.
검색창에 아무것도 입력하지 않으면 모든 행이 보이지만, 예를 들어 "R"을 입력하면 Ron과 Ricky처럼 이름에 R이 포함된 행만 남고 나머지는 자동으로 사라집니다.
마무리 및 확장 아이디어
이 예제는 외부 라이브러리 없이 순수 JavaScript만으로 실시간 검색 필터를 구현하는 기본적인 패턴을 보여줍니다. 실무에서는 다음과 같이 확장할 수 있습니다.
- 여러 열 검색: 첫 번째 열뿐 아니라 모든
<td>를 순회하며 비교 - 대소문자 정규화: 한글 검색 시에도 동작하도록 로직 조정
- 결과 없음 표시: 일치하는 행이 없을 때 "검색 결과가 없습니다" 메시지 출력
- 디바운싱(Debouncing): 대량의 데이터에서 성능 최적화
간단한 코드 몇 줄로 강력한 검색 기능을 추가할 수 있으니, 직접 응용해 보시기 바랍니다.