JSFiddle - React, Tailwind, and code Playground

by Mr sogata

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Suvervisor List</h2>
  <p>Type suvervisor name in input field to search the list for specific:</p>  
  <input class="form-control" id="filter" type="text" placeholder="Search..">
  <br>
  <ul class="list-group" id="list">
    <li class="list-group-item">utopian-io</li>
    <li class="list-group-item">arie.steem</li>
    <li class="list-group-item">espoem</li>
    <li class="list-group-item">knowledges</li>
  </ul>  
</div>

JavaScript

$(document).ready(function(){
  $("#filter").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#list li").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});