[UI 만들기][Vanilla JS] 자동완성 검색창 구현하기

 

원티드 프리온보딩 FE 챌린지 사전 미션으로 자동완성 검색창을 구현해 보았습니다. 이를 위해, 평소 사용하던 서비스들의 검색 기능을 유심히 관찰하면서, 자동완성이 얼마나 검색 경험을 향상시키는지 새삼 깨닫게 되었습니다.

 

자동완성 검색창의 주요 기능들을 다음과 같이 구현해보았습니다.

import dummy from "./data.js";

const searchInput = document.querySelector(".search-input");
const suggestionContainer = document.querySelector(".suggestionContainer");

let selectedIndex = -1;
let prevSelectedIndex = -1;

// 검색창에 입력시 제안 목록을 필터링
searchInput.addEventListener("input", function () {
  const inputValue = this.value.toLowerCase();
  const filteredSuggestions = dummy.filter(
    (suggestion) =>
      suggestion.description.toLowerCase().includes(inputValue) || suggestion.key.toLowerCase().includes(inputValue)
  );

  renderSuggestions(filteredSuggestions);
});

// 제안 목록을 렌더링
function renderSuggestions(filteredSuggestions) {
  if (filteredSuggestions.length === 0) {
    suggestionContainer.classList.remove("show");
    return;
  }

  suggestionContainer.innerHTML = "";
  let currentType = null;

  for (const suggestion of filteredSuggestions) {
    if (currentType !== suggestion.type) {
      const typeLi = document.createElement("li");
      typeLi.innerHTML = suggestion.type;
      typeLi.classList.add("suggestion-type");
      suggestionContainer.appendChild(typeLi);
      currentType = suggestion.type;
    }

    const li = document.createElement("li");
    li.innerHTML = `${suggestion.description}`;
    li.classList.add("suggestion-item");

    li.addEventListener("click", () => {
      searchInput.value = li.innerHTML;
      suggestionContainer.classList.remove("show");
    });
    suggestionContainer.appendChild(li);
  }

  suggestionContainer.classList.add("show");
  selectedIndex = -1;
}

// 화살표 키를 사용하여 제안 목록을 탐색하고 Enter 키를 사용하여 선택
searchInput.addEventListener("keydown", function (e) {
  const items = suggestionContainer.querySelectorAll(":scope > .suggestion-item");

  if (e.key === "ArrowDown") {
    selectedIndex = selectedIndex < items.length - 1 ? selectedIndex + 1 : 0;
    updateSelection();
  } else if (e.key === "ArrowUp") {
    selectedIndex = selectedIndex > 0 ? selectedIndex - 1 : items.length - 1;
    updateSelection();
  } else if (e.key === "Enter" && selectedIndex > -1) {
    searchInput.value = items[selectedIndex].innerHTML;
    suggestionContainer.classList.remove("show");
    selectedIndex = -1;
    prevSelectedIndex = -1;
  }
});

function updateSelection() {
  const items = suggestionContainer.querySelectorAll(":scope > .suggestion-item");

  if (prevSelectedIndex === selectedIndex || selectedIndex === -1) return;

  // 이전에 선택된 항목의 클래스 제거
  if (prevSelectedIndex !== -1) {
    items[prevSelectedIndex].classList.remove("selected");
  }

  // 새로 선택된 항목에 클래스 추가
  items[selectedIndex].classList.add("selected");
  items[selectedIndex].scrollIntoView({ behavior: "smooth", block: "nearest" });

  prevSelectedIndex = selectedIndex;
}

// 검색창 외부 클릭시 추천 목록 숨기기
document.addEventListener("click", function (e) {
  if (!searchInput.contains(e.target) && !suggestionContainer.contains(e.target)) {
    suggestionContainer.classList.remove("show");
  }
});

크게 총 4가지의 기능으로 구성되어 있습니다:

1. 검색 입력 처리

• 사용자가 입력 필드에 타이핑할 때마다 이벤트가 발생합니다.
• dummy 배열의 각 항목에 대해 filter 함수를 사용하여 (대소문자 구분 없이) 검사합니다.
• 필터링된 결과를 renderSuggestions 함수에 전달하여 화면에 표시합니다.

2. 제안 목록 렌더링

필터링된 제안 목록을 화면에 표시하고, 제안 항목들을 타입별로 그룹화하여 표시합니다.

• 필터링된 제안을 순회하면서:
  • 새로운 타입의 제안이 나타나면 타입 헤더를 생성합니다.
  • 각 제안에 대해 리스트 아이템을 생성합니다.
  • 각 아이템에 클릭 이벤트 리스너를 추가하여, 클릭 시 해당 제안을 입력 필드에 채우고 제안 목록을 숨깁니다.

3. 키보드 네비게이션

입력 필드에 입력된 키에 따라 다른 기능을 수행합니다.

• 위/아래 화살표 키로 제안 목록을 탐색할 수 있게 합니다.
• Enter 키로 선택한 제안을 입력창에 적용합니다.
• 선택된 항목을 시각적으로 표시하고 스크롤합니다.

4. 외부 클릭 처리

검색창이나 제안 목록 외부를 클릭하면 제안 목록을 숨깁니다.

 

---

 

See the Pen Auto-complete search box by ‍곽윤철[학생](소프트웨어융합대학 컴퓨터공학부) (@tkuffnrk-the-typescripter) on CodePen.

 

 

사용자의 입력에 즉각적으로 반응하는 인터페이스를 만들면서 성능 최적화의 중요성을 체감했습니다. 앞으로는 디바운싱이나 쓰로틀링 기법을 적용하여 더욱 효율적인 검색 기능을 구현해보고자 합니다.