[javascript] 지도에서 자동 완성 검색 기능 추가하기
지도 애플리케이션은 사용자가 원하는 장소를 쉽게 검색하고 싶을 때 매우 유용합니다. 자동 완성 검색 기능을 추가하면 사용자가 입력한 키워드에 대한 실시간 검색 결과를 제공할 수 있습니다. 이 기능을 구현하기 위해서는 JavaScript와 지도 API를 사용해야 합니다.
1. 자동 완성 검색 목록 가져오기
먼저, 사용자가 입력한 키워드를 기반으로 자동 완성 검색 목록을 가져와야 합니다. 주로 사용되는 방법 중 하나는 AJAX 요청을 통해 필요한 데이터를 서버로부터 가져오는 것입니다. 서버에서는 사용자가 입력한 키워드를 검색 조건으로 하여 결과를 반환해야 합니다.
// AJAX 요청 보내기
const keyword = document.getElementById('searchBox').value; // 검색어 입력란의 값을 가져옴
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/autocomplete?keyword=' + keyword, true);
xhr.onload = function() {
if (xhr.status === 200) {
const data = JSON.parse(xhr.response);
// 자동 완성 검색 목록 처리 로직 작성
} else {
console.error('Error: ' + xhr.status);
}
};
xhr.send();
2. 자동 완성 검색 목록 표시하기
검색 결과를 받은 후에는 사용자에게 자동 완성 검색 목록을 표시해야 합니다. 일반적으로는 검색 결과를 드롭다운 메뉴 형태로 보여줍니다. 이를 위해 HTML 요소를 동적으로 생성하고 스타일을 지정해야 합니다.
// HTML 요소 동적 생성
const dropdownMenu = document.createElement('ul');
dropdownMenu.id = 'autocomplete-menu';
// 검색 결과를 반복하여 목록 아이템 생성
data.forEach((item) => {
const itemElement = document.createElement('li');
itemElement.textContent = item.name;
dropdownMenu.appendChild(itemElement);
});
// 검색 결과를 표시할 위치 지정
const searchBox = document.getElementById('searchBox');
searchBox.parentNode.appendChild(dropdownMenu);
// 스타일 지정
dropdownMenu.style.position = 'absolute';
dropdownMenu.style.width = searchBox.offsetWidth + 'px';
dropdownMenu.style.top = searchBox.offsetHeight + 'px';
dropdownMenu.style.left = searchBox.offsetLeft + 'px';
3. 선택한 검색 결과 처리하기
사용자가 자동 완성 검색 목록에서 항목을 선택하면 해당 항목을 선택한 것으로 간주해야 합니다. 선택된 항목을 클릭하는 이벤트 핸들러를 추가하고, 해당 항목을 검색어 입력란에 입력하거나 관련된 작업을 수행해야 합니다.
// 이벤트 핸들러 등록
dropdownMenu.addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
const selectedValue = event.target.textContent;
// 선택한 검색 결과 처리 로직 작성
}
});
결론
이제 자동 완성 검색 기능을 지도 애플리케이션에 추가하는 방법을 알게 되었습니다. AJAX 요청을 통해 검색 결과를 가져오고, 동적으로 생성된 HTML 요소를 통해 검색 결과를 표시하고 처리하는 방법을 실습하였습니다. 이를 바탕으로 실제 지도 애플리케이션에 자동 완성 검색 기능을 구현해보세요!
참고 자료