JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<input type="text" data-filter="#myFilter li" placeholder="Search..." />

<ul id="myFilter">
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ul>

JavaScript

$(function() {
    var filter = $('[data-filter]');
    filter.on('keypress', function() {
        var target = $(this).data('filter'),
            filterText = $(this).val().toLowerCase(),
            x = target.filter(function() {
                var thisText = $(this).text().toLowerCase();
                return filterText === thisText;
            });
        target.hide();
        x.show();
        
    });
});