[javascript] jQuery를 사용한 오토컴플릿(Autocomplete) 기능 구현 방법

01 Dec 2023

javascript

개요

오토컴플릿(Autocomplete) 기능은 사용자가 입력한 텍스트에 대해 자동으로 제안을 보여주는 기능입니다. 이 기능은 웹 애플리케이션의 사용성과 효율성을 높일 수 있습니다. jQuery를 이용하여 간단하게 오토컴플릿 기능을 구현하는 방법에 대해 알아보겠습니다.

단계별 구현 방법

1. jQuery 라이브러리 추가

먼저, HTML 파일의 <head> 태그 내부에 다음 코드를 추가하여 jQuery 라이브러리를 추가합니다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. HTML 구조 작성

오토컴플릿 기능을 적용할 입력란을 포함한 HTML 구조를 작성합니다. 예를 들어, 다음과 같이 입력란을 작성할 수 있습니다.

<input type="text" id="autocomplete-input">
<div id="autocomplete-list"></div>

3. jQuery 코드 작성

다음으로, jQuery 코드를 작성하여 오토컴플릿 기능을 구현합니다.

$(document).ready(function() {
    // 입력란에 입력이 있을 때마다 이벤트 발생
    $('#autocomplete-input').on('input', function() {
        var input = $(this).val(); // 입력된 텍스트 가져오기
        
        // 입력된 텍스트를 서버로 전송하여 결과를 받아옴
        $.ajax({
            url: 'autocomplete.php', // 오토컴플릿 데이터를 처리하는 서버 스크립트 주소
            method: 'post',
            data: {input: input}, // 입력값을 서버에 전송
            dataType: 'json',
            success: function(response) {
                var autocompleteList = $('#autocomplete-list');
                
                // 오토컴플릿 제안 리스트 초기화
                autocompleteList.empty();
                
                // 서버에서 받아온 결과를 리스트로 추가
                $.each(response, function(key, value) {
                    var option = $('<div>' + value + '</div>'); // 리스트 아이템 생성
                    autocompleteList.append(option); // 리스트에 아이템 추가
                });
            },
            error: function() {
                console.log('Error');
            }
        });
    });
});

위 코드에서 autocomplete.php는 오토컴플릿 데이터를 처리하는 서버 스크립트 파일의 경로를 나타냅니다. 해당 스크립트는 입력된 텍스트를 기반으로 오토컴플릿 제안을 생성하고 반환해야 합니다.

4. 서버 스크립트 작성

autocomplete.php 파일에는 입력된 텍스트를 기반으로 오토컴플릿 제안을 생성하기 위한 로직을 구현합니다. 예를 들어, 데이터베이스에서 일치하는 값을 조회하여 반환하는 코드를 작성할 수 있습니다.

<?php
$input = $_POST['input']; // 전송된 입력값 가져오기

// 데이터베이스에서 일치하는 값을 조회하여 오토컴플릿 제안 생성

// 예제에서는 간단하게 고정된 값들을 제안으로 반환하는 코드 작성
$autocompleteSuggestions = array('Apple', 'Banana', 'Cherry', 'Date');

// 검색어와 일치하는 제안만 필터링
$filteredSuggestions = array_filter($autocompleteSuggestions, function($suggestion) use ($input) {
    return stripos($suggestion, $input) !== false;
});

echo json_encode($filteredSuggestions); // JSON 형식으로 제안 반환
?>

위 예제 코드는 입력된 텍스트와 일치하는 오토컴플릿 제안을 생성하여 JSON 형식으로 반환하는 간단한 코드입니다.

마무리

이제 jQuery를 이용하여 오토컴플릿 기능을 구현하는 방법에 대해 알아보았습니다. 이를 활용하여 웹 애플리케이션의 사용자 경험을 향상시킬 수 있습니다. 참고 문서와 추가적인 예제를 통해 보다 심화된 사용법을 익히실 수 있습니다.