JSFiddle - React, Tailwind, and code Playground

by Stalk

HTML

<input type="text" id="filter" placeholder="filter">
<div class="item-list">
    <ul class="views-summary">
        <li><a href="#">red apple</a></li>
        <li><a href="#">green apple</a></li>
        <li><a href="#">green grass</a></li>
        <li><a href="#">yellow sun</a></li>
        <li><a href="#">yellow grass</a></li>
        <li><a href="#">red sun</a></li>
    </ul>
</div>

CSS

.hidden {
    display: none;
}

JavaScript

jQuery.expr[":"].ContainsIgnoreCase = jQuery.expr.createPseudo(function(arg) {
    return function( elem ) {
        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

$('#filter').on('keyup', function() {
    var elem = $(this)
    var text = elem.val()
    var list = $('ul.views-summary')
    
    if(text.length < 2) { // show all
        list.find('li:hidden').removeClass('hidden')
    } else {
        list.find('li').addClass('hidden') // hide all
        list.find("li a:ContainsIgnoreCase('"+text+"')").parent().removeClass('hidden')  // show selected
    }
})