자동완성 검색은 사용자가 입력 필드에 텍스트를 입력할 때 관련된 제안을 실시간으로 표시하는 기능입니다. 이 기능은 사용자 경험을 향상시키고, 사용자가 원하는 내용을 빠르게 찾을 수 있도록 도와줍니다. 자동완성 기능은 주로 AJAX를 사용하여 구현되며, 사용자가 입력할 때마다 서버에 요청을 보내고, 관련된 데이터를 동적으로 불러와 표시합니다. 다음은 자동완성 기능을 구현하는 두 가지 예제입니다.
예제 1: 간단한 자동완성 검색 구현
이 예제에서는 사용자가 입력하는 텍스트에 기반하여 자동완성 제안을 보여주는 간단한 검색창을 구현합니다.
autocompleteSearch.jsp
<!DOCTYPE html>
<html>
<head>
<title>Autocomplete Search</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("#search").keyup(function(){
var query = $(this).val();
if(query != "") {
$.ajax({
url: 'searchHandler.jsp',
method: 'POST',
data: {query:query},
success: function(data) {
$('#searchList').fadeIn();
$('#searchList').html(data);
}
});
} else {
$('#searchList').fadeOut();
$('#searchList').html("");
}
});
$(document).on('click', 'li', function(){
$('#search').val($(this).text());
$('#searchList').fadeOut();
});
});
</script>
</head>
<body>
<input type="text" id="search" autocomplete="off" placeholder="Search here...">
<div id="searchList"></div>
</body>
searchHandler.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String query = request.getParameter("query");
// 데이터베이스나 다른 데이터 소스에서 'query'에 기반하여 검색 결과를 가져옵니다.
// 여기서는 간단한 예시로 몇 개의 정적 데이터를 사용합니다.
if(query != null) {
String[] sampleData = {"Apple", "Banana", "Cherry", "Date", "Grape", "Kiwi"};
for(String item : sampleData) {
if(item.toLowerCase().startsWith(query.toLowerCase())) {
out.println("<li>" + item + "</li>");
}
}
}
%>
- 이 예제는 위의 예제 1과 유사하나, searchHandler.jsp에서 실제 데이터베이스 연결과 쿼리 실행 코드로 수정하여 사용합니다.
- 데이터베이스 쿼리 결과를 반복하여 제안 목록을 동적으로 생성하고 클라이언트에게 반환합니다.
관련 전문용어 설명
- 자동완성(Autocomplete): 사용자가 입력 필드에 텍스트를 입력하는 동안 관련된 제안을 실시간으로 표시하는 기능입니다.
- AJAX (Asynchronous JavaScript and XML): 페이지의 전체를 리로드하지 않고도 서버에 데이터를 비동기적으로 요청하고 받아오는 기술입니다.
- JSON (JavaScript Object Notation): 데이터를 전송하고 저장하는 텍스트 기반의 경량 데이터 교환 형식입니다.
'jsp' 카테고리의 다른 글
| 실시간 알림: 실시간으로 알림을 표시하는 예제. (0) | 2023.12.26 |
|---|---|
| 웹 크롤링: 웹 사이트에서 데이터를 수집하는 크롤링 예제. (0) | 2023.12.26 |
| 게시물 공유 기능: 게시물을 소셜 미디어에 공유하는 기능을 추가하는 예제. (0) | 2023.12.26 |
| 모바일 애플리케이션 통합: 웹과 모바일 애플리케이션을 통합하는 예제. (0) | 2023.12.26 |
| 채팅 애플리케이션: 실시간 채팅 애플리케이션을 개발하는 예제. (0) | 2023.12.25 |