在页面内搜索并删除其他内容

Question

我希望在我的单一页面上插入一个搜索栏（仅搜索该页面），并自动删除不符合条件的内容（该页面内）。所有要搜索/删除的内容都具有相同的确切类别。当前代码不起作用，我相信类值的声明不正确。请帮忙

HTML：

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Begin Typing...">

JS：

function myFunction() {
  // Declare variables
  var input, filter, className, tagName, h4, i, txtValue;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  className = document.Document.getElementsByClassName("vc_toggle_title");

  // Loop through all items, and hide those who don't match the search query
  for (i = 0; i < className.length; i++) {
    h4 = className[i].getElementsByTagName("h4")[0];
    txtValue = h4.textContent || h4.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      className[i].style.display = "";
    } else {
      className[i].style.display = "none";
    }
  }
}

<div class="wpb_raw_code wpb_content_element wpb_raw_html">
  <div class="wpb_wrapper">
    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
  </div>
</div>
<div class="vc_toggle vc_toggle_default vc_toggle_color_default  vc_toggle_size_md">
  <div class="vc_toggle_title" style="">
    <h4>I’m interested in acquiring a bathtub with you, what should I do?</h4><i class="vc_toggle_icon"></i></div>
</div>
<div class="vc_toggle vc_toggle_default vc_toggle_color_default  vc_toggle_size_md">
  <div class="vc_toggle_title" style="">
    <h4>Can the order be finished online at ellasbubbles.com?</h4><i class="vc_toggle_icon"></i></div>
</div>

Answer 1

你打错字了。

这个：

className = document.Document.getElementsByClassName("vc_toggle_title");

应该是：

className = document.getElementsByClassName("vc_toggle_title");

所以你的代码应该是：

function myFunction() {
  // Declare variables
  var input, filter, className, tagName, h4, i, txtValue;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  className = document.getElementsByClassName("vc_toggle_title");

  // Loop through all items, and hide those who don't match the search query
  for (i = 0; i < className.length; i++) {
    h4 = className[i].getElementsByTagName("h4")[0];
    txtValue = h4.textContent || h4.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      className[i].style.display = "";
    } else {
      className[i].style.display = "none";
    }
  }
}

<div class="wpb_raw_code wpb_content_element wpb_raw_html">
  <div class="wpb_wrapper">
    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
  </div>
</div>
<div class="vc_toggle vc_toggle_default vc_toggle_color_default  vc_toggle_size_md">
  <div class="vc_toggle_title" style="">
    <h4>I’m interested in acquiring a bathtub with you, what should I do?</h4><i class="vc_toggle_icon"></i></div>
</div>
<div class="vc_toggle vc_toggle_default vc_toggle_color_default  vc_toggle_size_md">
  <div class="vc_toggle_title" style="">
    <h4>Can the order be finished online at ellasbubbles.com?</h4><i class="vc_toggle_icon"></i></div>
</div>