[jQuery] keyup 이벤트를 이용하여 입력 값에 따라 특정 아이템 검색하기

26 Dec 2023

jQuery

jQuery를 사용하면 입력 필드에 사용자가 입력할 때마다 자동으로 입력 값을 기반으로 아이템을 검색할 수 있습니다. 이를 위해 keyup 이벤트를 사용하여 입력 값의 변화를 감지하고 이에 따라 검색을 수행할 수 있습니다.

아래는 keyup 이벤트를 이용하여 입력 값에 따라 특정 아이템을 검색하는 간단한 예제입니다.

$(document).ready(function(){
    $('#searchInput').on('keyup', function(){
        var searchText = $(this).val().toLowerCase();
        $('.item').each(function(){
            if($(this).text().toLowerCase().includes(searchText)){
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    });
});

위의 코드에서는 #searchInput이라는 ID를 가진 입력 필드에서 keyup 이벤트가 발생하면 입력 값을 가져와서 .item이라는 클래스를 가진 요소들 중에서 입력 값과 일치하는 것이 있는지 확인한 후, 일치하는 것은 보여주고 그렇지 않은 것은 숨깁니다.

이러한 방식으로 jQuery를 사용하여 실시간으로 입력 값에 따라 특정 아이템을 검색할 수 있습니다.

참고 자료: