[jQuery] keyup 메소드를 이용한 동적 검색 기능 구현

26 Dec 2023

jQuery

이번 포스트에서는 jQuery 라이브러리의 keyup 메소드를 사용하여 웹 페이지에서 동적 검색 기능을 구현하는 방법에 대해 알아보겠습니다.

1. keyup 메소드

jQuery의 keyup 메소드는 사용자가 입력란에 키보드를 눌렀을 때 발생하는 이벤트를 감지하는 함수입니다. 이를 활용하여 실시간으로 검색어를 입력하면 입력 내용에 맞는 결과를 동적으로 출력할 수 있습니다.

$(document).ready(function(){
    $('#search-input').keyup(function(){
        // 검색어 입력 내용을 가져와서 검색 기능 수행
        var searchText = $(this).val();
        // 검색 결과를 출력하거나 서버에 Ajax 요청을 보내는 등의 동작 수행
    });
});

위 코드에서 #search-input은 검색 입력란의 id를 나타내며, keyup 이벤트가 발생할 때마다 사용자가 입력한 내용을 변수 searchText에 저장하여 검색 기능을 수행합니다.

2. 동적 검색 기능 구현

동적 검색 기능을 구현하기 위해서는 keyup 이벤트 발생 시, 검색어에 해당하는 결과를 출력하거나 서버에 Ajax 요청을 보내어 검색 결과를 가져와야 합니다. 아래는 간단한 예제 코드입니다.

$(document).ready(function(){
    $('#search-input').keyup(function(){
        var searchText = $(this).val();
        $.ajax({
            url: 'search.php',
            type: 'post',
            data: {keyword: searchText},
            success: function(response){
                // 서버로부터 받은 검색 결과(response)를 화면에 출력
                $('#search-results').html(response);
            }
        });
    });
});

위 코드에서 search.php는 실제 검색 기능을 처리하는 서버 측 스크립트이며, 사용자가 입력한 검색어를 포함한 결과를 반환합니다. 이 결과를 #search-results 요소에 동적으로 출력하여 사용자에게 보여줍니다.

3. 마무리

jQuery의 keyup 메소드를 이용하여 동적 검색 기능을 구현할 수 있습니다. 이를 활용하여 사용자가 웹 페이지에서 실시간으로 검색 결과를 확인할 수 있는 편리한 검색 기능을 제공할 수 있습니다. 함께 실습해보시기를 권장합니다.

더 많은 기능과 활용법은 jQuery 공식 문서나 다양한 온라인 자료를 참고하시기 바랍니다.

[참고 문헌]

jQuery 공식 문서: https://api.jquery.com/keyup/