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>
	<li>Gordon Boda</li>
	<li>Dominick Moreida</li>
	<li>Josue...

CSS

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

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

li.hidden {
    display: none;
}
li.visibru {
    display: list-item;
}
}

JavaScript

var search = document.getElementById('s');
var list = document.getElementById('l');
var listItems = list.getElementsByTagName('li');
listItems = Array.prototype.slice.call(listItems);

var searchAction = function() {
	var term = search.value;

	var showItem = function(elem) {
		elem.style.display = 'list-item';
	}
	var hideItem = function(elem) {
		elem.style.display = 'none';
	}

	var itemFilter = function(item) {
		if (0 === term.length) {
			showItem(item);
			return;
		}

		if (-1 === item.innerText.toLowerCase().indexOf(term.toLowerCase())) {
			hideItem(item);
		} else {
			showItem(item);
		}
	}

	listItems.map(itemFilter);
}

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

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

var timeoutThing = {
	INPUT_TIMEOUT: 00, // ms
	saveTimeoutID: null,

	restartSaveTimeout:  function(thingToDo) {
		this.cancelSaveTimeout();
		var that = this;
		this.saveTimeoutID = window.setTimeout(function() {
		   thingToDo();
		}, this.INPUT_TIMEOUT);
	},

	cancelSaveTimeout: function() {
	   clearTimeout(this.saveTimeoutID);
	}
}