[jQuery] jQuery keyup 메소드를 사용하여 입력 값에 따라 특정 항목 정렬하기

26 Dec 2023

jQuery

jQuery의 keyup 이벤트 메소드는 사용자가 입력 필드에 텍스트를 입력할 때 발생하는 이벤트를 처리하는 데 사용됩니다. 이를 활용하여 입력된 값을 기준으로 특정 항목을 동적으로 정렬하는 기능을 구현할 수 있습니다.

1. HTML 구조 설정

먼저 HTML 구조를 설정합니다. 예를 들어, 아래와 같은 HTML 코드를 가정해 봅시다.

<input type="text" id="searchInput" placeholder="검색">
<ul id="itemList">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
  <li>Orange</li>
</ul>

2. jQuery를 활용한 정렬 기능 구현

다음으로 jQuery를 사용하여 입력 값에 따라 항목을 필터링하고 정렬하는 기능을 구현합니다.

$('#searchInput').keyup(function(){
  var searchText = $(this).val().toLowerCase();
  $('#itemList li').each(function(){
    var itemText = $(this).text().toLowerCase();
    if(itemText.indexOf(searchText) === -1){
      $(this).hide();
    } else {
      $(this).show();
    }
  });
});

위의 코드는 #searchInput 요소에서 keyup 이벤트가 발생할 때마다 입력된 텍스트를 가져와서, 각 항목의 텍스트와 비교하여 일치하지 않는 경우에 해당 항목을 숨기는 동작을 수행합니다.

정리

이렇게하면 사용자가 입력 필드에 값을 입력함에 따라 입력된 값과 일치하는 항목만 표시되고, 일치하지 않는 항목은 숨겨집니다. 이를 통해 동적으로 항목을 필터링하고 정렬하는 기능을 구현할 수 있습니다.

참고 자료

jQuery 공식 문서: https://jquery.com/
MDN Web Docs on keyup event: https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event