在搜索栏中切换div显示

Question

我正在尝试使用搜索输入来切换DIV显示属性。到目前为止，一切都在起作用，但是，当搜索栏为空时，我希望它可以向后切换以显示：无。我似乎无法使它起作用，也不想使用按钮来实现此目的。当输入变为空时，有没有办法发射功能？目前，页面加载时函数正在触发，因此我的DIV始于隐藏。我希望它们在输入搜索栏中的相对标签时显示它们，但是当输入为空或其确切标签不在输入中时，请再次隐藏。任何帮助都很棒！代码：

function myFunction() {
  var input = document.getElementById("Search");
  var filter = input.value.toLowerCase();
  var nodes = document.getElementsByClassName('connect-cat');

      for (i = 0; i < nodes.length; i++) {
      if (nodes[i].innerHTML.toLowerCase().includes(filter)) {
          nodes[i].style.display = "block";
        } else {
          nodes[i].style.display = "none";
        }
      }
    };
function check()
{
  var isEmpty = $('Search').is(":empty");
  $('#silent').toggle(isEmpty);
};

输入栏：

<input type="text" id="Search" onKeyup="myFunction();" Placeholder="Please enter a search term...">

检查功能在页面顶部发射：

  $(document).ready(function()
{ 
  check();  
}

Answer 1

您应该将事件附加在输入字段上。

尝试这样的事情：

$('#Search').change(function() {
    var length = $(this).val().length;
    if (length == 0) {
        // hide div
    }
});