자동완성 입력 UI 만들기｜폼 UX 향상을 위한 실무형 AutoComplete 구현

글쓴이 /

자동완성 입력 UI는 사용자가 검색어나 데이터를 입력할 때 빠르고 정확한 입력을 돕는 강력한 UX 기능입니다. 이번 글에서는 JavaScript와 Ajax를 활용해 실시간 자동완성 기능을 구현하고, SweetAlert2와 조합하여 실무에서 바로 활용할 수 있는 완성도 높은 UI를 만들어보겠습니다.

자동완성 UI가 필요한 이유

자동완성 기능은 사용자 입력을 단순화하고, 검색 정확도와 속도를 높이는 핵심 기능입니다.
예를 들어, 주소 입력, 검색창, 예약 시스템 등에서 사용됩니다.

장점

  • 입력 속도 향상
  • 오타 및 잘못된 입력 방지
  • UX 개선으로 사용자 만족도 증가

💡 RAO TIP
자동완성은 특히 검색창, 주소 입력, 상품 선택 같은 시나리오에서 필수적입니다.
단, 너무 많은 데이터가 한 번에 표시되지 않도록 적절한 제한을 두세요.

기본 HTML 구조

자동완성을 위한 최소 HTML 구조입니다.

<form id="searchForm">
  <input type="text" id="searchInput" placeholder="검색어를 입력하세요">
  <div id="autocomplete-list" class="autocomplete-items"></div>
</form>
HTML

간단한 CSS

.autocomplete-items {
  position: absolute;
  border: 1px solid #ccc;
  background: #fff;
  max-height: 200px;
  overflow-y: auto;
  z-index: 99;
}

.autocomplete-items div {
  padding: 8px;
  cursor: pointer;
}

.autocomplete-items div:hover {
  background: #f0f0f0;
}
CSS

설명

  • #autocomplete-list 영역에 자동완성 결과를 표시
  • 리스트를 오버플로우 처리하여 긴 목록도 깔끔하게 표시

JavaScript 기본 자동완성 구현

입력된 텍스트를 기준으로 미리 정의된 배열에서 검색하여 표시합니다.

const suggestions = ["Apple", "Banana", "Blueberry", "Cherry", "Mango", "Orange"];

document.getElementById('searchInput').addEventListener('input', function() {
  const input = this.value.toLowerCase();
  const listContainer = document.getElementById('autocomplete-list');
  listContainer.innerHTML = '';

  if (!input) return;

  const filtered = suggestions.filter(item => item.toLowerCase().includes(input));

  filtered.forEach(item => {
    const div = document.createElement('div');
    div.textContent = item;
    div.addEventListener('click', function() {
      document.getElementById('searchInput').value = item;
      listContainer.innerHTML = '';
    });
    listContainer.appendChild(div);
  });
});
JavaScript

설명

  • 사용자가 입력한 값과 suggestions 배열의 항목을 비교
  • 일치하는 항목만 실시간으로 표시
  • 클릭 시 입력 필드에 값 자동 입력

Ajax와 연동하기

실무에서는 서버에서 데이터를 불러와 자동완성을 처리합니다.

JavaScript 예시 (Fetch API 사용)

document.getElementById('searchInput').addEventListener('input', function() {
  const query = this.value.trim();
  const listContainer = document.getElementById('autocomplete-list');
  listContainer.innerHTML = '';

  if (query.length < 2) return; // 최소 2글자 이상 입력 시 검색

  fetch(`/search_suggestions.php?q=${encodeURIComponent(query)}`)
    .then(response => response.json())
    .then(data => {
      data.forEach(item => {
        const div = document.createElement('div');
        div.textContent = item.name;
        div.addEventListener('click', function() {
          document.getElementById('searchInput').value = item.name;
          listContainer.innerHTML = '';
        });
        listContainer.appendChild(div);
      });
    })
    .catch(() => {
      console.error('자동완성 데이터를 불러오는 중 오류 발생');
    });
});
JavaScript

서버 측 PHP 예제

검색어와 일치하는 데이터를 JSON 형식으로 반환합니다.

<?php
// search_suggestions.php
header('Content-Type: application/json; charset=utf-8');

$keyword = isset($_GET['q']) ? trim($_GET['q']) : '';
$suggestions = [
    ['name' => 'Apple'],
    ['name' => 'Banana'],
    ['name' => 'Blueberry'],
    ['name' => 'Cherry'],
    ['name' => 'Mango'],
    ['name' => 'Orange']
];

if ($keyword === '') {
    echo json_encode([]);
    exit;
}

$result = array_filter($suggestions, function($item) use ($keyword) {
    return stripos($item['name'], $keyword) !== false;
});

echo json_encode(array_values($result));
PHP

설명

  • stripos() 함수로 대소문자 구분 없이 검색
  • 결과를 JSON 형식으로 반환해 프론트엔드와 연동

SweetAlert2와 조합하기

자동완성으로 선택한 값을 SweetAlert2 모달에서 최종 확인할 수 있습니다.

document.getElementById('searchForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const value = document.getElementById('searchInput').value;

  Swal.fire({
    title: '검색어 확인',
    text: `선택하신 검색어는 "${value}" 입니다.`,
    icon: 'info',
    confirmButtonText: '확인'
  });
});
JavaScript

💡 RAO TIP
자동완성 + SweetAlert2 조합은 검색, 예약, 주소 입력 같은 상황에서
입력 실수를 줄이고 데이터 정확성을 높이는 데 유용합니다.

UX 향상을 위한 추가 팁

  1. 최대 표시 개수 제한
    • 너무 많은 자동완성 항목이 보이지 않도록 10개 이하로 제한
  2. 키보드 네비게이션 지원
    • ↑↓ 방향키로 항목 이동, Enter로 선택 기능 추가
  3. 디바운스(Debounce) 적용
    • 입력 시 서버 요청을 300ms 정도 지연시켜 불필요한 API 호출 방지

💡 RAO TIP
검색 UX는 속도와 정확성이 핵심입니다.
데이터가 많을수록 디바운스를 꼭 적용하세요.

마무리

자동완성 입력 UI는 사용자가 데이터를 더 빠르고 정확하게 입력할 수 있도록 돕는 핵심 UX 기능입니다.
이번 글에서는 기본 배열 기반 자동완성부터 Ajax 연동, SweetAlert2 조합까지 실무 예제를 다뤘습니다.
다음 글에서는 다단계(Multi-Step) 폼으로 더 복잡한 입력 과정을 단계별로 개선하는 방법을 알아보겠습니다.

Summary in English

Build an AutoComplete input UI to enhance form UX. Learn how to implement basic functionality, connect it with Ajax for dynamic data, and combine it with SweetAlert2 for real-world, user-friendly interfaces.

“이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.”

대표 사진: Unsplash의Pankaj Patel

위로 스크롤