DOM 조작을 활용한 실시간 검색 기능 만들기 🔍

웹 개발의 세계에서 사용자 경험을 향상시키는 가장 멋진 방법 중 하나는 실시간 검색 기능을 구현하는 것입니다. 이 글에서는 JavaScript와 DOM(Document Object Model) 조작을 사용하여 간단하지만 강력한 실시간 검색 기능을 만드는 방법을 배워볼 것입니다. 복잡한 용어는 사용하지 않을 거니 걱정 마세요!

실시간 검색이란?

실시간 검색 기능은 사용자가 검색창에 텍스트를 입력할 때마다 관련 결과를 즉시 보여주는 기능입니다. 이는 사용자가 원하는 정보를 빠르게 찾을 수 있게 해주며, 웹사이트의 사용자 경험을 크게 향상시킵니다.

시작하기 전에

실시간 검색 기능을 구현하기 전에, HTML 파일에 검색창(input)과 결과를 보여줄 요소를 준비해야 합니다. 예를 들어:

<input type="text" id="searchBox" placeholder="검색...">
<div id="searchResults"></div>

JavaScript로 실시간 검색 구현하기

이제 JavaScript를 사용하여 실시간 검색 기능을 구현해봅시다. 먼저, 검색창에 입력이 이루어질 때마다 이벤트를 감지하도록 합니다.

// 검색창 요소를 가져옵니다.
const searchBox = document.getElementById('searchBox');

// 'input' 이벤트 리스너를 추가합니다.
searchBox.addEventListener('input', function() {
    // 사용자가 입력한 텍스트를 가져옵니다.
    const searchText = searchBox.value.toLowerCase();

    // 여기에 검색 로직을 구현합니다.
    // 예시를 위해 단순히 콘솔에 출력합니다.
    console.log(searchText);
});

검색 결과 표시하기

사용자가 입력한 텍스트를 기반으로 검색 결과를 처리하고 표시하는 로직을 추가해봅시다. 실제 애플리케이션에서는 서버에서 데이터를 가져오거나, 페이지에 이미 있는 정보를 필터링할 수 있습니다. 여기서는 간단한 예시로, 몇 가지 데이터를 배열에 저장하고 이를 필터링하는 방법을 보여드리겠습니다.

// 예시 데이터
const data = ['HTML', 'CSS', 'JavaScript', 'React', 'Node.js'];

searchBox.addEventListener('input', function() {
    const searchText = searchBox.value.toLowerCase();
    const filteredData = data.filter(item => item.toLowerCase().includes(searchText));

    // 검색 결과를 표시할 요소를 가져옵니다.
    const searchResults = document.getElementById('searchResults');

    // 결과 요소를 비웁니다.
    searchResults.innerHTML = '';

    // 필터링된 데이터를 사용하여 결과를 표시합니다.
    filteredData.forEach(item => {
        const div = document.createElement('div');
        div.textContent = item;
        searchResults.appendChild(div);
    });
});

이 코드는 사용자가 검색창에 입력할 때마다 data 배열을 필터링하고, 일치하는 항목을 searchResults 요소에 표시합니다. 각 검색 결과는 새로운 div 요소로 생성되어 추가됩니다.

마무리

이제 기본적인 실시간 검색 기능을 구현하는 방법을 배웠습니다. 이 예제는 매우 단순하지만, 이 원리를 활용하여 더 복잡한 검색 기능을 구현할 수 있습니다. 사용자 경험을 향상시키고 웹 개발 기술을 연습하는 데 도움이 되길 바랍니다. Happy coding!