[javascript] 사용자 입력을 통해 동적으로 데이터를 필터링하는 방법

21 Dec 2023

javascript

사용자 입력을 통해 동적으로 데이터를 필터링하는 기능은 웹 애플리케이션과 데이터 시각화 애플리케이션에서 매우 일반적입니다. 이 기능을 구현하기 위해서는 JavaScript를 사용하여 사용자가 입력한 값을 기반으로 데이터를 필터링할 수 있습니다.

HTML과 JavaScript를 활용한 동적 데이터 필터링 예제

아래는 간단한 HTML과 JavaScript를 사용한 동적 데이터 필터링 예제입니다. 사용자가 입력한 값을 기준으로 데이터를 필터링하는 기능을 구현하였습니다.

HTML

<!DOCTYPE html>
<html>
<head>
  <title>동적 데이터 필터링 예제</title>
</head>
<body>
  <input type="text" id="filterInput" placeholder="필터링할 값 입력">
  <button onclick="filterData()">필터링</button>

  <ul id="dataList">
    <li>사과</li>
    <li>바나나</li>
    <li>체리</li>
    <li>딸기</li>
    <li>포도</li>
  </ul>

  <script>
    function filterData() {
      var input, filter, ul, li, i;
      input = document.getElementById('filterInput');
      filter = input.value.toUpperCase();
      ul = document.getElementById('dataList');
      li = ul.getElementsByTagName('li');
      
      for (i = 0; i < li.length; i++) {
        if (li[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
          li[i].style.display = '';
        } else {
          li[i].style.display = 'none';
        }
      }
    }
  </script>
</body>
</html>

위의 예제는 사용자 입력값을 받아 ul 요소에 있는 리스트를 필터링하여 일치하는 값만 표시하도록 하는 예제입니다. 사용자가 입력한 값과 리스트에 있는 각 요소의 값을 비교하여 일치하는 요소만 화면에 표시합니다.

결론

JavaScript를 사용하여 사용자 입력을 동적으로 처리하고 이를 기반으로 데이터를 필터링하는 것은 매우 강력한 기능입니다. 이러한 접근 방식을 활용하여 사용자와 상호작용하는 다양한 웹 애플리케이션을 구현할 수 있습니다.

참고 자료: