[jQuery] keyup 이벤트를 이용하여 입력 값에 따라 자동 완성 기능 구현하기
웹 페이지에서 사용자가 입력하는 동안 해당 입력 값에 따라 자동 완성 기능을 구현하고 싶을 때, keyup 이벤트를 활용할 수 있습니다. 이를 통해 입력 값이 변경될 때마다 자동으로 완성 기능이 실행되어 사용자 경험을 향상시킬 수 있습니다.
1. HTML 구조 설정
먼저, 입력란과 자동 완성 기능이 나타날 부분을 포함하는 HTML을 작성합니다.
<input type="text" id="autocomplete-input" placeholder="찾고 싶은 항목을 입력하세요">
<div id="autocomplete-results"></div>
2. jQuery를 이용한 자동 완성 기능 구현
이제 jQuery를 이용하여 keyup 이벤트 핸들러를 설정하고, 입력 값에 따라 자동 완성 기능을 구현합니다.
$(document).ready(function() {
$('#autocomplete-input').on('keyup', function() {
var inputText = $(this).val();
// 입력 값에 따라 자동 완성 기능을 구현하는 로직을 작성
// 예: AJAX를 통한 서버와의 통신, 결과를 autocomplete-results에 표시하는 등
});
});
위 예제에서는 #autocomplete-input 요소에 대한 keyup 이벤트를 감지하고, 입력 값을 가져온 뒤 이를 기반으로 자동 완성 기능을 실행할 수 있는 로직을 추가해야 합니다.
3. 추가 기능 구현
자동 완성 결과를 받아올 때 서버와의 통신이 필요한 경우, AJAX를 사용하여 비동기 통신을 수행하여 원하는 데이터를 가져올 수 있습니다. 또한 받아온 결과를 #autocomplete-results와 같은 요소에 적절히 표시하여 사용자에게 제안해 주는 것이 좋습니다.
$(document).ready(function() {
$('#autocomplete-input').on('keyup', function() {
var inputText = $(this).val();
$.ajax({
url: 'autocomplete.php', // 자동 완성 결과를 반환하는 서버 측 스크립트
method: 'GET',
data: { query: inputText },
success: function(response) {
// 받아온 결과를 #autocomplete-results에 표시
$('#autocomplete-results').html(response);
}
});
});
});
위 예제에서는 사용자가 입력한 값을 autocomplete.php 스크립트로 전달하고, 받아온 결과를 #autocomplete-results에 표시하고 있습니다.
이제 위 코드를 활용하여 웹 페이지에서 keyup 이벤트를 이용하여 입력 값에 따라 자동 완성 기능을 구현할 수 있습니다.