JSFiddle - React, Tailwind, and code Playground

HTML

<input id="s">
<style id="t"></style>
<ul id="l">
    <li data-name='Vicente Yeates'>Vicente Yeates</li>
    <li data-name='Bryant Mcmiller'>Bryant Mcmiller</li>
    <li data-name='Analisa Shetterly'>Analisa Shetterly</li>
    <li data-name='Dorotha Graniero'>Dorotha Graniero</li>
    <li data-name='Monte Laranjo'>Monte Laranjo</li>
    <li data-name='Ross Olynger'>Ross Olynger</li>
    <li data-name='Antione Ruehl'>Antione Ruehl</li>
    <li data-name='Shayla Lamprecht'>Shayla Lamprecht</li>
    <li data-name='Latasha Sarkodie'>Latasha Sarkodie</li>
    <li data-name='Duncan Kellems'>Duncan Kellems</li>
    <li data-name='Ike Yanos'>Ike Yanos</li>
    <li data-name='Whitley Catanese'>Whitley Catanese</li>
    <li data-name='Lisa Janek'>Lisa Janek</li>
    <li data-name='Lucas Ahrends'>Lucas Ahrends</li>
    <li data-name='Kena Firmin'>Kena Firmin</li>
    <li data-name='Doug Rardin'>Doug Rardin</li>
    <li data-name='Pilar Awender'>Pilar Awender</li>
    <li data-name='Melda Barlup'>Melda Barlup</li>
    <li data-name='Teodoro Bartunek'>Teodoro Bartunek</li>
    <li data-name='Amira Fiene'>Amira Fiene</li>
    <li data-name='Kris Ormsby'>Kris Ormsby</li>
    <li data-name='Digna Engelbert'>Digna Engelbert</li>
    <li data-name='Chase Schingeck'>Chase Schingeck</li>
    <li data-name='Marc Capraro'>Marc Capraro</li>
    <li data-name='Angele World'>Angele World</li>
    <li data-name='Rex Alvirez'>Rex Alvirez</li>
    <li data-name='Margarett Weyer'>Margarett Weyer</li>
    <li data-name='Cedric Nevils'>Cedric Nevils</li>
    <li data-name='Charisse Guglielmo'>Charisse Guglielmo</li>
    <li data-name='September Shedd'>September Shedd</li>
    <li data-name='Charlie Buffaloe'>Charlie Buffaloe</li>
    <li data-name='Andreas Totten'>Andreas Totten</li>
    <li data-name='Selma Almen'>Selma Almen</li>
    <li data-name='Karleen Lamarsh'>Karleen Lamarsh</li>
    <li data-name='Carlton Ence'>Carlton Ence</li>
    <li data-name='Laverna Cassio'>Laverna Cassio</li>
 ...

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 styling = document.getElementById('t');


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

    if (term == '') styling.innerHTML = '';
    else styling.innerHTML = '#l>li:not([data-name *= "' + term + '"]) {display: none}';
}

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);
    }
}

var jon = [];
var lis = document.querySelectorAll('li');
var toto = document.getElementById('toto');
for (let el of lis) {
    jon.push("<li data-name='" + el.textContent + "'>" + el.textContent + "</li>");
}
toto.textContent = jon.join('');