CODEWITHSUNDEEP
javascriptphphtmlnode.jswordpress
Ellas International
Ellas International

Reputation: 13

Search Within Page and Remove Other Content

I am looking to insert a search bar on my singular page (that will search only that page), and automatically remove the content (within that page) that does not match the criteria. All content to be searched/removed have the same exact class. Current code is not working, I believe class values are being declared incorrectly. Please assist

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>

Upvotes: 1

Views: 64

Answers (1)

Spectric
Spectric

Reputation: 31987

You made a typo.

This:

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

should be:

className = document.getElementsByClassName("vc_toggle_title");

So your code should be:

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>

Upvotes: 1

Related Questions