JSFiddle - React, Tailwind, and code Playground

by jeremyperson

HTML

<form action="" class="styled" id="live-search" method="post">
    <fieldset>
    
      <p style="padding-left: 10px; padding-top: 5px;">Start typing to filter.</p>
      <input class="text-input" id="filter" style="margin-top: -60px;" type="text" value="" />  
      <div id="filter-count"></div>
    </fieldset>
</form>

<div>
<p class="listheaders"><strong>Phones:</strong></p>
  <ul class="vglist">
    <li class="listitems"><a href="/en/node/38871" target="_blank">Téléphone Android Nexus 5x<br />
    <img src="someImagePathEtc" width="100" /> </a> <span style="display: none;">teléfono phone nexus 5x</span></li>
    <li class="listitems"><a href="/en/node/33302" target="_blank">Einlösen von Geschenkkarten<br />
    <img src="someImagePathEtc" width="100" /></a> <span style="display: none;">gift cards</span></li>
  </ul>
</div>

CSS

.container {
  display: flex;
}
.container > div {
  flex: 1; /*grow*/
}
.vglist {
  list-style-type: none; 
  border-right: 1px solid #cccccc; 
  padding-right: 10px; 
  margin-left: -20px; 
  height: 1450px;"
}
.styled {
padding: 5px; 
margin: 5px;
}
.imagespacing {
padding-bottom: 20px;	
}
input[type=text] {
    width: 50%;
    padding: 12px 20px;
    margin: 8px 8px;
    box-sizing: border-box;
}
.listitems {
	height: 180px;
	line-height: 1.25;
}
.listheaders{
	height: 50px;
	line-height: 1.25;
	vertical-align: bottom;
	width: 100px;
}
fieldset {
	height: 115px;
}

JavaScript

$(document).ready(function(){
    $("#filter").keyup(function(){
 
        // Retrieve the input field text and reset the count to zero
        var filter = $(this).val(), count = 0;
 
        // Loop through the visual guide list
        $(".vglist li").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).fadeOut("slow");
 
            // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).show();
                count++;
            }
        });
 
        // Update the count
        var numberItems = count;
        $("#filter-count").html("&nbsp;&nbsp;&nbsp;Number of Guides: "+count);
    });
});