Question

我正在尝试使用搜索输入切换div显示属性。到目前为止，一切正常，但是，当搜索栏为空时，我希望它切换回display：none。我似乎无法使其正常工作，并且不想使用按钮来实现此目的。当输入为空时，是否有办法触发函数？现在，该功能在页面加载时触发，因此我的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
    }
});

切换搜索栏中的div显示

1 个答案: