如何使用keyup事件来筛选矩形？

<input type="text" id="filterInput" placeholder="输入筛选条件">
<div class="rectangle" data-id="1">矩形1</div>
<div class="rectangle" data-id="2">矩形2</div>
<div class="rectangle" data-id="3">矩形3</div>

document.getElementById('filterInput').addEventListener('keyup', function(event) {
  var filterValue = event.target.value.toLowerCase(); // 获取输入框的值并转为小写
  var rectangles = document.getElementsByClassName('rectangle'); // 获取所有矩形元素

  Array.from(rectangles).forEach(function(rectangle) {
    var rectangleText = rectangle.textContent.toLowerCase(); // 获取矩形的文本内容并转为小写
    if (rectangleText.includes(filterValue)) {
      rectangle.style.display = 'block'; // 显示符合条件的矩形
    } else {
      rectangle.style.display = 'none'; // 隐藏不符合条件的矩形
    }
  });
});