[javascript] 입력 폼에서 자동완성 기능 구현하기

11 Dec 2023

javascript

입력 폼에 자동완성 기능을 추가하려면, JavaScript를 사용하여 사용자의 입력을 감지하고 요청에 맞는 추천 목록을 표시해야 합니다.

1. 입력 이벤트 감지

먼저, 입력 폼 요소에서 input 이벤트를 감지하여 사용자의 입력을 실시간으로 포착합니다.

const inputField = document.getElementById('input-field');
inputField.addEventListener('input', function (event) {
  // 입력 내용에 따라 추천 목록을 업데이트합니다.
});

2. 추천 목록 표시

사용자가 입력을 하면, 해당 입력을 기준으로 추천 목록을 가져와 화면에 표시해야 합니다. 자동완성 목록을 표시할 요소를 생성하고 보여줍니다.

function showSuggestions(suggestions) {
  const suggestionsList = document.getElementById('suggestions-list');
  suggestionsList.innerHTML = '';
  suggestions.forEach((suggestion) => {
    const listItem = document.createElement('li');
    listItem.textContent = suggestion;
    suggestionsList.appendChild(listItem);
  });
  suggestionsList.style.display = 'block';
}

3. 서버와 통신

입력 내용을 서버로 보내어 해당하는 추천 목록을 받아옵니다. 이를 위해 fetch API나 XMLHttpRequest를 사용하여 서버와 통신해야 합니다.

function fetchSuggestions(input) {
  fetch(`/getSuggestions?input=${input}`)
    .then((response) => response.json())
    .then((data) => showSuggestions(data.suggestions));
}

4. 입력 이벤트와 서버 통신의 결합

이제, 입력 이벤트와 서버 통신을 결합하여 자동완성 기능을 완성합니다.

inputField.addEventListener('input', function (event) {
  const userInput = event.target.value;
  fetchSuggestions(userInput);
});

이렇게하면 입력 폼에서 사용자의 입력에 따라 자동완성 기능이 작동합니다.

마무리

이상으로 JavaScript를 사용하여 입력 폼에 자동완성 기능을 구현하는 방법에 대해 알아보았습니다. 원하는 기능이 조금 더 복잡할 경우, 추가적인 로직이나 UI 업데이트가 필요할 수 있습니다.