JSFiddle - React, Tailwind, and code Playground

by andres descalzo

HTML

<input type="text" id="input1"/>
<ul id="list">
    <li>Rich</li>
    <li>Rajim</li>
    <li>Andres</li>
    <li>Jorge</li>
    <li>Pedro</li>
    <li>Raul</li>
    <li>Ramon</li>
    <li>Arturo</li>
    <li>Roberto</li>
    <li>Juan</li>
    <li>Miguel</li>
    <li>Julieta</li>
    <li>Ricardo</li>
    <li>Beto</li>
    <li>Mariano</li>
    <li>Mercedes</li>
    <li>Paula</li>
    <li>Delfina</li>
    <li>Rich</li>
    <li>Rajim</li>
    <li>Andres</li>
    <li>Jorge</li>
    <li>Pedro</li>
    <li>Raul</li>
    <li>Ramon</li>
    <li>Arturo</li>
    <li>Roberto</li>
    <li>Juan</li>
    <li>Miguel</li>
    <li>Julieta</li>
    <li>Ricardo</li>
    <li>Beto</li>
    <li>Mariano</li>
    <li>Mercedes</li>
    <li>Paula</li>
    <li>Delfina</li>
    <li>Rich</li>
    <li>Rajim</li>
    <li>Andres</li>
    <li>Jorge</li>
    <li>Pedro</li>
    <li>Raul</li>
    <li>Ramon</li>
    <li>Arturo</li>
    <li>Roberto</li>
    <li>Juan</li>
    <li>Miguel</li>
    <li>Julieta</li>
    <li>Ricardo</li>
    <li>Beto</li>
    <li>Mariano</li>
    <li>Mercedes</li>
    <li>Paula</li>
    <li>Delfina</li>
    <li>Rich</li>
    <li>Rajim</li>
    <li>Andres</li>
    <li>Jorge</li>
    <li>Pedro</li>
    <li>Raul</li>
    <li>Ramon</li>
    <li>Arturo</li>
    <li>Roberto</li>
    <li>Juan</li>
    <li>Miguel</li>
    <li>Julieta</li>
    <li>Ricardo</li>
    <li>Beto</li>
    <li>Mariano</li>
    <li>Mercedes</li>
    <li>Paula</li>
    <li>Delfina</li>
    <li>Rich</li>
    <li>Rajim</li>
    <li>Andres</li>
    <li>Jorge</li>
    <li>Pedro</li>
    <li>Raul</li>
    <li>Ramon</li>
    <li>Arturo</li>
    <li>Roberto</li>
    <li>Juan</li>
    <li>Miguel</li>
    <li>Julieta</li>
    <li>Ricardo</li>
    <li>Beto</li>
    <li>Mariano</li>
    <li>Mercedes</li>
    <li>Paula</li>
    <li>Delfina</li>
    <li>Rich</li>
    <li>Rajim</li>
    <li>Andres</li>
    <li>Jorge</li>
    <li>Pedro</li>
    <li>Raul</li>
    <li>Ramon</li>
    <li>Arturo</li>
    <li>Roberto</li>
   ...

CSS

li.h {display:none;}

JavaScript

// ref "http://stackoverflow.com/questions/187537/is-there-a-case-insensitive-jquery-contains-selector"

$.extend($.expr[':'], {
  'containsi': function(elem, i, match, array)
  {
    return (elem.textContent || elem.innerText || '').toLowerCase()
    .indexOf((match[3] || "").toLowerCase()) >= 0;
  }
});

$("#input1").keyup(function() {
    
    var 
        search = $(this).val().toLowerCase();

    $._list = ($._list) ? $._list : $("#list li");
    
    $._list
        .removeClass("h")
        .filter(":not(:containsi('"+search+"'))").addClass("h");
});