JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<input id="filter" type="text" name="fname" /><br />
<div id="listofstuff">
<div class="anitem">
<span class="item_name">Dog</span>
<span class="itemdescruption">AboutItem1</span>
</div>
<div class="anitem">
<span class="item_name">Doodle Bird</span>
<span class="itemdescruption">AboutItem2</span>
</div>
<div class="anitem">
   <span class="item_name">Cat</span>
   <span class="itemdescruption">AboutItem3</span>
</div>
</div>

CSS

.anitem { display: none; }

JavaScript

$("#filter").bind("keyup", function() {
    var text = $(this).val().toLowerCase();
    var items = $(".item_name");
    
    //first, hide all:
    items.parent().hide();
    
    //show only those matching user input:
    items.filter(function () {
        return $(this).text().toLowerCase().indexOf(text) == 0;
    }).parent().show();
});