jQuery Autocomplete는 사용자가 입력하는 값에 따라 자동으로 제안 목록을 표시해주는 기능입니다.
사용자는 제안된 목록 중 하나를 선택하거나 계속해서 입력할 수 있으며, 이 기능은 검색 창, 폼 입력 필드, 데이터 필터링 등 다양한 상황에서 유용하게 사용할 수 있습니다.
1. 기본 사용법
먼저, jQuery와 jQuery UI를 HTML 문서에 포함해야 합니다. 이를 위해 CDN을 사용할 수 있습니다.
<!-- jQuery 라이브러리 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- jQuery UI 라이브러리 및 스타일시트 -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>이제 기본적인 autocomplete 기능을 사용하는 방법을 살펴보겠습니다.
2. 간단한 Autocomplete 예제
다음 예제는 사용자가 입력하는 대로 사전에 정의된 배열의 값을 제안하는 간단한 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Autocomplete 예제</title>
</head>
<body>
<h2>jQuery Autocomplete 예제</h2>
<label for="search">검색어 입력: </label>
<input id="search" type="text">
<script>
$(function() {
// 자동완성에 사용할 데이터 배열
var availableTags = [
"Apple",
"Banana",
"Cherry",
"Date",
"Fig",
"Grape",
"Lemon",
"Mango",
"Orange",
"Peach",
"Strawberry"
];
// #search 필드에 autocomplete 적용
$("#search").autocomplete({
source: availableTags
});
});
</script>
</body>
</html>위 예제에서 availableTags 배열에 있는 과일 이름들이 사용자가 입력할 때마다 제안 목록으로 표시됩니다. 사용자가 한 글자 이상 입력하면 해당 글자로 시작하는 값을 자동으로 필터링하여 제안합니다.
3. 외부 데이터 소스와 연동
만약, 제안 목록을 서버에서 가져오거나 외부 API와 연동하고 싶다면, source 옵션에 URL을 지정할 수 있습니다. 이를 통해 사용자가 입력한 내용을 기반으로 서버에 AJAX 요청을 보내고, 서버에서 응답받은 데이터를 제안할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Autocomplete - AJAX 예제</title>
</head>
<body>
<h2>서버 연동 Autocomplete 예제</h2>
<label for="search">검색어 입력: </label>
<input id="search" type="text">
<script>
$(function() {
$("#search").autocomplete({
source: function(request, response) {
$.ajax({
url: "https://example.com/api/search",
dataType: "json",
data: {
term: request.term // 사용자가 입력한 값
},
success: function(data) {
response(data); // 서버에서 받은 데이터를 제안 목록으로 표시
}
});
}
});
});
</script>
</body>
</html>위 예제에서는 사용자가 입력한 값이 term 파라미터로 서버에 전송되고, 서버에서 JSON 형식의 데이터를 반환하여 제안 목록으로 표시됩니다. 이 방식은 대규모 데이터나 동적 데이터 처리에 유용합니다.
4. Autocomplete의 추가 옵션
jQuery Autocomplete는 다양한 옵션을 제공하여 더 많은 기능을 구현할 수 있습니다.
- minLength: 자동완성 목록이 표시되기 위해 최소한으로 입력해야 하는 글자 수 (기본값: 1)
- delay: 사용자가 입력을 멈추고 자동완성 목록이 뜨기까지의 지연 시간 (기본값: 300ms)
- select: 제안된 항목 중 하나를 선택했을 때 실행되는 함수
다음은 minLength와 select 옵션을 사용하는 예제입니다.
<script>
$(function() {
$("#search").autocomplete({
source: availableTags,
minLength: 2, // 2글자 이상 입력해야 자동완성 작동
select: function(event, ui) {
alert("선택된 항목: " + ui.item.value);
}
});
});
</script>
'Develop' 카테고리의 다른 글
| [Thymeleaf 타임리프] 구분자를 기준으로 배열만들기 setSplit 사용방법 (12) | 2024.10.08 |
|---|---|
| PostgreSQL에서 한글 ORDER BY 정렬 문제 해결하기 COLLATE (4) | 2024.10.08 |
| [Thymeleaf 타임리프] Spring Security를 사용하여 로그인 정보를 Thymeleaf에서 출력하는 방법 (12) | 2024.10.04 |
| [Javascript] jQuery 이벤트의 동적 바인딩과 정적 바인딩 (8) | 2024.10.02 |
| 타임리프(Thymeleaf) 현재 날짜 출력 및 format 변환 (6) | 2024.09.28 |