JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<input placeholder="Search Me" id="box" type="text" />

  <ul class="widgets-type">
    <li class="widget-panel-item" aria-expanded="true" data-toggle="collapse" data-target="#OTHER">
      <div class="circleBase mini"><span class="glyphicons glyphicons-circle-info"></span></div>
      <div class="circleBase type1"><span class="glyphicons glyphicons-list"></span></div>
      <div class="helwidgetp-panel-text">
        <div class="glyphicon glyphicon-chevron-up alignArrow"></div>Other</div>
      <div class="collapse in" id="OTHER" aria-expanded="true" style="width: 100%;">
        <ul>
          <li class="widget-panel-item draggable-item ui-draggable" contentId="112">
            <div class="widget-panel-icon"><span class="glyphicon glyphicon-asterisk"></span></div>
            <div class="widget-panel-txt">Clock</div>
          </li>
          <li class="widget-panel-item draggable-item ui-draggable" contentId="115">
            <div class="widget-panel-icon"><span class="glyphicon glyphicon-cloud"></span></div>
            <div class="widget-panel-txt">Entity Selector</div>
          </li>
          <li class="widget-panel-item draggable-item ui-draggable" contentId="110">
            <div class="widget-panel-icon"><span class="glyphicon glyphicon-cloud"></span></div>
            <div class="widget-panel-txt">Image</div>
          </li>
          <li class="widget-panel-item draggable-item ui-draggable" contentId="111">
            <div class="widget-panel-icon"><span class="glyphicon glyphicon-cloud"></span></div>
            <div class="widget-panel-txt">Notifications</div>
          </li>
          <li class="widget-panel-item draggable-item ui-draggable" contentId="114">
            <div class="widget-panel-icon"><span class="glyphicon glyphicon-edit"></span></div>
            <div class="widget-panel-txt">Obligation Progress</div>
          </li>
          <li class="widget-panel-item draggable-item ui-draggable" contentId="113">
            <div...

JavaScript

$('#box').keyup(function () {
  var valThis = $(this).val().toLowerCase();
  if (valThis == "") {
    $('.widget-panel-item').show();
  } else {
    $('.widget-panel-item').each(function () {
      var text = $(this).text().toLowerCase();
      (text.indexOf(valThis) >= 0) ? $(this).show(): $(this).hide();
    });
  };
});