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

웹 개발의 세계에서, 사용자 경험을 향상시키는 것은 매우 중요합니다. 오늘은 DOM(Document Object Model) 조작을 활용하여 사용자가 입력하는 즉시 결과를 보여주는 실시간 검색 기능을 만드는 방법을 소개하겠습니다. 복잡한 용어는 사용하지 않을 거니, 걱정 마세요!

시작하기 전에

실시간 검색 기능을 만들기 위해, HTML, CSS, 그리고 JavaScript의 기본 지식이 필요합니다. 이 기능은 사용자가 검색창에 텍스트를 입력할 때마다, 해당 텍스트와 일치하는 결과를 바로 보여주는 방식으로 작동합니다.

HTML 구조 설정하기

먼저, 사용자에게 보여질 검색창과 결과를 표시할 공간을 HTML로 구성해야 합니다.

<div id="searchWrapper">
    <input type="text" id="searchBox" placeholder="검색어를 입력하세요...">
    <ul id="results"></ul>
</div>

CSS로 스타일링하기

간단하게 검색창과 결과 목록에 스타일을 적용해봅시다. 여기서는 기본적인 스타일만 적용하지만, 자유롭게 수정하여 사용하세요.

#searchWrapper {
    width: 300px;
    margin: auto;
}

#searchBox {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
}

#results li {
    list-style: none;
    padding: 5px;
    border-bottom: 1px solid #ccc;
}

JavaScript로 실시간 검색 기능 구현하기

이제 JavaScript를 사용하여 실시간 검색 기능을 구현할 차례입니다. 사용자가 검색창에 텍스트를 입력할 때마다, 일치하는 결과를 #results에 표시합니다.

document.getElementById('searchBox').addEventListener('input', function(e) {
    var searchValue = e.target.value.toLowerCase();
    var filteredResults = searchData.filter(function(item) {
        return item.toLowerCase().includes(searchValue);
    });

    displayResults(filteredResults);
});

function displayResults(results) {
    var resultsContainer = document.getElementById('results');
    resultsContainer.innerHTML = '';

    results.forEach(function(result) {
        var li = document.createElement('li');
        li.textContent = result;
        resultsContainer.appendChild(li);
    });
}

// 예시 데이터, 실제 데이터로 대체 가능
var searchData = ['HTML', 'CSS', 'JavaScript', 'DOM 조작', '이벤트 처리'];

위 코드는 사용자가 입력한 값에 따라 searchData 배열에서 일치하는 항목을 필터링하고, 그 결과를 화면에 표시합니다. searchData는 검색 가능한 데이터를 나타내며, 실제 애플리케이션에서는 서버에서 가져온 데이터가 될 수 있습니다.

마무리

이제 기본적인 실시간 검색 기능을 구현하는 방법을 배웠습니다. 사용자가 입력하는 즉시 피드백을 받을 수 있어, 사용자 경험이 크게 향상됩니다. 이 기능을 여러분의 프로젝트에 적용하여, 사용자에게 더 나은 인터랙션을 제공해 보세요!