JSFiddle - React, Tailwind, and code Playground

by Ravindra Athreya

HTML

<input type="text" id="dino-search" placeholder="Search Dinosaurs (start typing)">
<ul id="dino-list">
  <li id="showList">Triceratops
      <ul id="list" style="display:none;">
          <li>Test1</li>
          <li>Test2</li>
          <li>Test3</li>
      </ul>
    </li>
  <li>Stegasaurus</li>
  <li>Tyrannosaurus Rex</li>
  <li>Diplodocus</li>
  <li>Pteradactyl</li>
</ul>

JavaScript

$(document).ready(function () {
/* initially hide list items */
//$("#dino-list li").hide();

/* filter dinosaurs as you type */
$("#dino-search").on("keyup click input", function () {
if (this.value.length > 0) {
    
  $("#dino-list li").hide().filter(function () {
    return $(this).text().toLowerCase().indexOf($("#dino-search").val().toLowerCase()) != -1;
  }).show();
}
else {
  //$("#dino-list li").hide();
    $("#list").hide();
}
});

    
    $("#showList").click(function(){
    $("#list").toggle();
});

});