How to use a search box to filter by class name?-CodePudding

Hi I was wondering if anyone could help, I'm trying to make it so when you search in a search box if a div contains a word you entered in the box it will show and if not it will hide. This is what I have so far but now I'm stuck, I have researched but I only have a basic knowledge of Javascript and I can't seem to get any further. Thank you!

function myFunction() {
  // Declare variables
  var input, filter;
  input = document.getElementById('myInput');
  filter = input.value.toLowerCase();
  
  
  $('div').find('div').each(function(){
     var className = $(this).attr("class");
     
  });
      
}

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

  <div >
    <div ><h1>hello 1</h1></div>
    <div ><h1>hello 2</h1></div>
    <div ><h1>hello 3</h1></div>
    <div ><h1>hello 4</h1></div>
  </div>

CodePudding user response：

Taking these two requirements:

contains a word

filter by class name

You can filter by class name by using a selector "." classname, eg .test, so you can combine the input text with "." and use that as a selector.

$(".wrapper>div." filter).show();

When combining like this, you do need to check for items that will make the query break (eg empty value) - might be better to have a select for this, which would also reduce typos.

If you use a jquery event (as already using jquery), this will be the input, so you can get the filter with a simple:

var filter = $(this).val();

There's various ways to show/hide/toggle, here's one method, combining the above.

$("#myInput").on("keyup", myFunction);

function myFunction() {
  var filter = $(this).val().toLowerCase().trim();
  
  $(".wrapper>div").hide();
  if (filter !== "") 
    $(".wrapper>div." filter).show();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="myInput" placeholder="Search for names..">

<div >
  <div >
    <h1>hello 1</h1>
  </div>
  <div >
    <h1>hello 2</h1>
  </div>
  <div >
    <h1>hello 3</h1>
  </div>
  <div >
    <h1>hello 4</h1>
  </div>
</div>

CodePudding user response：

The text() method in jQuery returns the text content of the specified element and removes any markup inside it. What you would want to do is loop through all divs, get their text content and pass it through includes to check if any part of the search text matches. If it does, you show it using jQuery show() method and hide it using hide() method. Also, you don't need to use find('div').

function myFunction() {
  // Declare variables
  var input, filter;
  input = document.getElementById('myInput');
  filter = input.value.toLowerCase();
  
  
  $('div').each(function(){
     var divTextContent = $(this).text().toLowerCase();
     if (divTextContent.includes(filter)){
       $(this).show();
     } else {
       $(this).hide();
     }
  });
      
}

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

  <div >
    <div ><h1>hello 1</h1></div>
    <div ><h1>hello 2</h1></div>
    <div ><h1>hello 3</h1></div>
    <div ><h1>hello 4</h1></div>
  </div>