JSFiddle - React, Tailwind, and code Playground

HTML

<input id="s">
<ul id="l">
  <li>Vicente Yeates</li>
  <li>Bryant Mcmiller</li>
  <li>Analisa Shetterly</li>
  <li>Dorotha Graniero</li>
  <li>Monte Laranjo</li>
  <li>Ross Olynger</li>
  <li>Antione Ruehl</li>
  <li>Shayla Lamprecht</li>
  <li>Latasha Sarkodie</li>
  <li>Duncan Kellems</li>
  <li>Ike Yanos</li>
  <li>Whitley Catanese</li>
  <li>Lisa Janek</li>
  <li>Lucas Ahrends</li>
  <li>Kena Firmin</li>
  <li>Doug Rardin</li>
  <li>Pilar Awender</li>
  <li>Melda Barlup</li>
  <li>Teodoro Bartunek</li>
  <li>Amira Fiene</li>
  <li>Kris Ormsby</li>
  <li>Digna Engelbert</li>
  <li>Chase Schingeck</li>
  <li>Marc Capraro</li>
  <li>Angele World</li>
  <li>Rex Alvirez</li>
  <li>Margarett Weyer</li>
  <li>Cedric Nevils</li>
  <li>Charisse Guglielmo</li>
  <li>September Shedd</li>
  <li>Charlie Buffaloe</li>
  <li>Andreas Totten</li>
  <li>Selma Almen</li>
  <li>Karleen Lamarsh</li>
  <li>Carlton Ence</li>
  <li>Laverna Cassio</li>
  <li>Veta Oblinski</li>
  <li>Mariko Oliveros</li>
  <li>Lasandra Ellsworth</li>
  <li>Jose Phinisee</li>
  <li>Jody Karlson</li>
  <li>Sharice Horst</li>
  <li>Joshua Collar</li>
  <li>Alexander Starnaud</li>
  <li>Arthur Bachorski</li>
  <li>Ignacio Laubach</li>
  <li>Lucrecia Hildago</li>
  <li>Natashia Barton</li>
  <li>Aimee Zumot</li>
  <li>Ashley Topping</li>
  <li>Ceola Rosebrough</li>
  <li>Steve Wellinghoff</li>
  <li>Brant Bintz</li>
  <li>Enrique Spratley</li>
  <li>Issac Braylock</li>
  <li>Odis Slingluff</li>
  <li>Kara Louth</li>
  <li>Columbus Delmuro</li>
  <li>Jenniffer Moree</li>
  <li>Mei Perfecto</li>
  <li>Terri Buren</li>
  <li>Andrea Figurelli</li>
  <li>Thersa Everhardt</li>
  <li>Raisa Rabuck</li>
  <li>Demarcus Bodman</li>
  <li>Javier Lovenduski</li>
  <li>Jackie Jeck</li>
  <li>Cyrus Olivid</li>
  <li>Timmy Lozoya</li>
  <li>Eldridge Elton</li>
  <li>Noble Abelson</li>
  <li>Marlys Cannell</li>
  <li>Sylvie Laughery</li>
  <li>Bobbie Grahl</li>
  <li>Katharine Gillispie</li>
  <li>Kena Papik</li>
 ...

CSS

li {
  transition: height .25s ease-in-out, opacity .75s ease-in-out;
}

span {
  background: wheat;
  border-radius: 2px;
}

JavaScript

var search = document.getElementById('s');
var items = Array.from(document.getElementById('l').children, function(li) {
  return {
    text: li.textContent,
    style: li.style,
    pre: li.firstChild, // the text node
    match: li.appendChild(document.createElement("span"))
             .appendChild(document.createTextNode("")),
    post: li.appendChild(document.createTextNode(""))
  };
});

function show(style) {
  //style.display = 'list-item';
  style.height = '19px';
  style.opacity = 1;
  style.overflow = 'visible';
}

function hide(style) {
  style.height = 0;
  style.opacity = 0;
  style.overflow = 'hidden';
}

function searchAction() {
  var term = search.value;
  var re = new RegExp(term, 'i'); // case insensitive

  for (var {text, style, pre, match, post} of items) {
    // re.lastIndex = 0; // if the regex was global
    var m = text.match(re);
    if (m) {
      pre.nodeValue = text.slice(0, m.index);
      match.nodeValue = m[0];
      post.nodeValue = text.slice(m.index + m[0].length);
      show(style);
    } else {
      hide(style);
    }
  }
}

var searchActivateEvent = function() {
  timeoutThing.restart(searchAction);
}

search.addEventListener('keyup', searchActivateEvent, false);

var timeoutThing = {
  id: null,
  restart: function(thingToDo) {
    cancelAnimationFrame(this.id)
    this.id = requestAnimationFrame(thingToDo);
  }
}