JSFiddle - React, Tailwind, and code Playground

by abuhamzah

HTML

<input id="filter" type="text">

 

<div id="results">
  <div class="results"> 
    <p>Toyota</p> 
  </div>
  <div class="results"> 
    <p>Mercedes</p> 
  </div>
   <div class="results"> 
    <p>john</p> 
  </div>
   <div class="results"> 
    <p>test</p> 
  </div>
  
</div>

CSS

.header {
  display: flex;
}

.header p {
  flex: 1;
  font-weight: bold;
}

.results {
  display: flex;
}

.results p {
  flex: 1;
}

JavaScript

$("#filter").keyup(function() {

      // Retrieve the input field text and reset the count to zero
      var filter = $(this).val(),
        count = 0;

      // Loop through the comment list
      $('#results div').each(function() {


        // If the list item does not contain the text phrase fade it out
        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
          $(this).hide();

          // Show the list item if the phrase matches and increase the count by 1
        } else {
          $(this).show();
          count++;
        }

      });

    });