JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    jQuery: <input type="text" id="jQueryFilter" /> javascript: <input type="text" id="javascriptFilter" />
</div>
<div id="jQueryResult"><!-- --></div>
<div id="javascriptResult"><!-- --></div>
<ul class="ablist">
    <li>Air Force blue</li>
    <li>Alice blue</li>
    <li>Alizarin</li>
    <li>Alizarin crimson</li>
    <li>Amaranth</li>
    <li>Amber</li>
    <li>Amethyst</li>
    <li>Android</li>
    <li>Anti-flash white</li>
    <li>Antique white</li>
    <li>Ao</li>
    <li>Apricot</li>
    <li>Aqua</li>
    <li>Aquamarine</li>
    <li>Arylide yellow</li>
    <li>Ash grey</li>
    <li>Auburn hair</li>
    <li>Aureolin</li>
    <li>Awesome</li>
    <li>Azure</li>
    <li>Baby blue</li>
    <li>Banana</li>
    <li>Battleship grey</li>
    <li>Beige</li>
    <li>Bistre</li>
    <li>Black</li>
    <li>Blanched Almond</li>
    <li>Bleu de France</li>
    <li>Blond</li>
    <li>Blue</li>
    <li>Blue-green</li>
    <li>Bole</li>
    <li>Bondi blue</li>
    <li>Bottle green</li>
    <li>Boysenberry</li>
    <li>Brandeis blue</li>
    <li>Brass</li>
    <li>British racing green</li>
    <li>Bronze</li>
    <li>Brown</li>
    <li>Buff</li>
    <li>Burgundy</li>
    <li>Burnt sienna</li>
    <li>Burnt umber</li>
    <li>Byzantium</li>
    <li>Cadet grey</li>
    <li>Cadmium pigments</li>
    <li>Cambridge Blue</li>
    <li>Camel</li>
    <li>Candy apple red</li>
    <li>Caput mortuum</li>
    <li>Cardinal</li>
    <li>Carmine</li>
    <li>Carnation pink</li>
    <li>Carnelian</li>
    <li>Carolina blue</li>
    <li>Celeste</li>
    <li>Cerise</li>
    <li>Cerulean</li>
    <li>Cerulean blue</li>
    <li>CG Blue</li>
    <li>CG Red</li>
    <li>Chamoisee</li>
    <li>Champagne</li>
    <li>Charcoal</li>
    <li>Chartreuse</li>
    <li>Chestnut</li>
    <li>Chocolate</li>
    <li>Chrome yellow</li>
    <li>Cinereous</li>
    <li>Cinnabar</li>
    <li>Cinnamon</li>
    <li>Citrine</li>
    <li>Cobalt blue</li>
    <li>Coffee</li>
    <li>Columbia blue</li>
   ...

CSS

#jQueryResult, #javascriptResult {
    height: 100px; width: 200px; float: left; overflow: auto;
}
.ablist { clear: left; }

JavaScript

$('#jQueryFilter,#javascriptFilter').focus(function() {
    $('ul.ablist > li').show();
});
var $list = $('ul.ablist > li')
$('#jQueryFilter').keyup( function() {
    var jqStart = (new Date).getTime(),
        search = $(this).val().toLowerCase(),
        $item,
        result;

    $list.each( function() {
        $item = $(this);
        if ( $item.text().toLowerCase().indexOf(search) === -1 )
            $item.hide();
        else
            $item.show();
    } );

    var result = ['Time: ', ((new Date).getTime() - jqStart), '<br />'].join('');
    $('#jQueryResult').prepend(result);
} );

var list = list = document.querySelectorAll('ul.ablist > li');
document.getElementById('javascriptFilter').addEventListener( 'keyup', function () {
    var jsStart = (new Date).getTime(),
        search = this.value.toLowerCase(),
        i = list.length - 1,
        listItem,
        result;
    while( i >= 0 )
    {
        listItem = list[i];
        if ( listItem.textContent.toLowerCase().indexOf(search) === -1 )
            listItem.style.display = 'none';
        else
            listItem.style.display = 'block';
        i--;
    }

    result = ['Time: ', ((new Date).getTime() - jsStart), '<br />'].join('');
    $('#javascriptResult').prepend(result);
}, false );