javascript - Search <div> for text - Stack Overflow

admin管理员组

文章数量:1201373

I am trying to search EACH on a single HTML5 page, and then HIDE the if there is no match. I am 'almost' but not quite there. So far, my will disappear if there is a match of a single char, but then reappear if i type anything else. Also, i would like the page to reset if i clear the search box. Would really appreciate if you Java guys could take a look.

function myFunction() {
    input = document.getElementById("Search");
    filter = input.value.toUpperCase();
    for (i=0; i<document.getElementsByClassName('target').length; i++){
if(document.getElementsByClassName('target'[i].innerHTML.toUpperCase().indexOf(filter) > -1) {     
    document.getElementsByClassName("target")[i].style.display = "none";
            }
        else{
        	document.getElementsByClassName("target")[i].style.display = "";
        } 
    }
}
    </script>

    <table align="center" width="20%">
    <tr>
      <td style="padding-right: 10px">
        <input type="text" id="Search" onkeyup="myFunction()" 
        placeholder="Please enter a search term.." title="Type in a name">
      </td>
    </tr>
    </table>
    <br>


    <div class="target">
    This is my DIV element.
    </div>
    <div class="target">
    This is another Div element.
    </div>

I am trying to search EACH on a single HTML5 page, and then HIDE the if there is no match. I am 'almost' but not quite there. So far, my will disappear if there is a match of a single char, but then reappear if i type anything else. Also, i would like the page to reset if i clear the search box. Would really appreciate if you Java guys could take a look.

function myFunction() {
    input = document.getElementById("Search");
    filter = input.value.toUpperCase();
    for (i=0; i<document.getElementsByClassName('target').length; i++){
if(document.getElementsByClassName('target'[i].innerHTML.toUpperCase().indexOf(filter) > -1) {     
    document.getElementsByClassName("target")[i].style.display = "none";
            }
        else{
        	document.getElementsByClassName("target")[i].style.display = "";
        } 
    }
}
    </script>

    <table align="center" width="20%">
    <tr>
      <td style="padding-right: 10px">
        <input type="text" id="Search" onkeyup="myFunction()" 
        placeholder="Please enter a search term.." title="Type in a name">
      </td>
    </tr>
    </table>
    <br>


    <div class="target">
    This is my DIV element.
    </div>
    <div class="target">
    This is another Div element.
    </div>

• javascript
• jquery
• html
• text-search

Share Improve this question Follow edited May 7, 2017 at 3:06 Aravindh Gopi 2,1662929 silver badges3636 bronze badges asked May 6, 2017 at 15:01 noowienoowie 6311 gold badge11 silver badge88 bronze badges 1

• ... I am trying to search EACH "div" on a single HTML5 page, and then HIDE the "div" if there is no match.... – noowie Commented May 6, 2017 at 15:03

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 16

There you go. Used includes method that fit your needs.

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

  for (let i = 0; i < nodes.length; i++) {
    if (nodes[i].innerText.toLowerCase().includes(filter)) {
      nodes[i].style.display = "block";
    } else {
      nodes[i].style.display = "none";
    }
  }
}

<table align="center" width="20%">
  <tr>
    <td style="padding-right: 10px">
      <input type="text" id="Search" onkeyup="myFunction()" placeholder="Please enter a search term.." title="Type in a name">
    </td>
  </tr>
</table>
<br>


<div class="target">
  This is my DIV element.
</div>
<div class="target">
  This is another Div element.
</div>
<div class="target">
  Can you find me?
</div>

Your code works well!.

if(document.getElementsByClassName('target')<--you forgot to close paranthesis

and reverse your if..else ,

Your if..else should be like this

if(document.getElementsByClassName('target')[i].innerHTML.toUpperCase().indexOf(filter) > -1) {     
    document.getElementsByClassName("target")[i].style.display = "block";
            }
        else{
            document.getElementsByClassName("target")[i].style.display = "none";
        } 
    }

function myFunction() {
    input = document.getElementById("Search");
    filter = input.value.toUpperCase();
    var length = document.getElementsByClassName('target').length;

    for (i=0; i<length; i++){
if(document.getElementsByClassName('target')[i].innerHTML.toUpperCase().indexOf(filter) > -1) {     
    document.getElementsByClassName("target")[i].style.display = "block";
            }
        else{
        	document.getElementsByClassName("target")[i].style.display = "none";
        } 
    }
}

<table align="center" width="20%">
    <tr>
      <td style="padding-right: 10px">
        <input type="text" id="Search" onkeyup="myFunction()" 
        placeholder="Please enter a search term.." title="Type in a name">
      </td>
    </tr>
    </table>
    <br>


    <div class="target">
    This is my DIV element.
    </div>
    <div class="target">
    This is another Div element.
    </div>

You can combine toggle with searching for the string, it works quite well.

$("#Search").on("keyup", function () {
  val = $(this).val().toLowerCase();
  $("div").each(function () {
    $(this).toggle($(this).text().toLowerCase().includes(val));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table align="center" width="20%">
<tr>
  <td style="padding-right: 10px">
    <input type="text" id="Search"
    placeholder="Please enter a search term.." title="Type in a name">
  </td>
</tr>
</table>
<br>


<div class="target">
This is my DIV element.
</div>
<div class="target">
This is another Div element.
</div>

    Using JQuery: https://jquery.com

                function myFunction() {
                input = document.getElementById("Search"); 
            filter = input.value.toUpperCase();
        //Show all div class target
                $("div.target").show();
        //All div class target that not contains filter will be hidden
                $('div.target').each(function(index, elem){
       if($(elem).text().toUpperCase().includes(filter)) { //Not hidden 
 } else { $(elem).hide(); } 
                });
            } 

Adding to Oen44's answer - if you want to add a "no results found" message when the query isn't found in any searched element, this works:

JavaScript:

function searchFunction() {
  var input = document.getElementById("Search");
  var filter = input.value.toLowerCase();
  var nodes = document.getElementsByClassName('target');
  var itemsDisplayed = 0;
  document.getElementById('no_results').display = "none";

  for (i = 0; i < nodes.length; i++) {
    if (nodes[i].innerText.toLowerCase().includes(filter)) {
      nodes[i].style.display = "block";
      itemsDisplayed += 1;
    } else {
      nodes[i].style.display = "none";
    }
  }
  if (itemsDisplayed === 0){
      document.getElementById('no_results').display = "block";
  }
}

HTML:

      <table align="center" width="20%">
        <tr>
          <td style="padding-right: 10px">
            <input type="text" id="Search" onkeyup="myFunction()" 
            placeholder="Please enter a search term.." title="Type in a name">
          </td>
        </tr>
      </table>
        <br>
    
        <div class="target">
        This is my DIV element.
        </div>
        <div class="target">
        This is another Div element.
        </div>
        <div class="target">
        Can you find me?
        </div>
        <div id="no_results" style="display:none;">
        No results found
        </div>

I am Using this search code for bootstrap accordion search

<script>
  function searchFunction() {
    const input = document.getElementById("search-faq");
    const filter = input.value.toLowerCase();
    const buttons = document.querySelectorAll('.accordion-button');
    let itemsDisplayed = 0;
    const noResults = document.getElementById('no_results');
    noResults.style.display = "none";

    for (const button of buttons) {
      const content = button.parentNode.nextElementSibling;
      if (button.innerText.toLowerCase().includes(filter)) {
        if (content.classList.contains('show-search')) {
          content.classList.add("show");
          content.classList.remove("show-search");
        }
        button.style.display = "flex";
        itemsDisplayed++;
      } else {
        if (content.classList.contains('show')) {
          content.classList.add("show-search");
          content.classList.remove("show");
        }
        button.style.display = "none";
      }
    }

    noResults.style.display = itemsDisplayed === 0 ? "block" : "none";
  }
</script>

本文标签： javascriptSearch ltdivgt for textStack Overflow