JSFiddle - React, Tailwind, and code Playground

by sidouglas

HTML

<form><input data-type="search" id="faq_search_input"></form>
<ul data-filter="true" data-input="#faq_search_input" id="search_results">
<li>
	<h4>A heading</h4>
	<p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis.</p>
</li>
<li>
	<h4>Another heading</h4>
	<p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis.</p>
</li>
<li>
	<h4>Fail time</h4>
	<p>Quisque facilisis <a href="http://www.google.com">google</a> a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis.</p>
</li>
</ul>

CSS

.highlight {
    background:red;
    padding:0 1px 0;
}

JavaScript

$(function () {
    var $searchResults = $("#search_results");
    var $li = $searchResults.find('li');

    // This makes the contains selector case insensitive
    // Use :containsCaseInsensitive in place of :contains()
    jQuery.expr[':'].containsCaseInsensitive = function (elm, i, m) {
        var $elm = $(elm);

        $elm = stripHighlight($elm);
        $elm.html(function (_, html) {

            if (m.slice(-1)[0] === '') {
                stripHighlight($elm);
                return;
            }
            return html.replace(m.slice(-1)[0], '<span class="highlight">' + m.slice(-1)[0] + '</span>');
        });

        return jQuery($elm).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
    };
    
    // When a key is pressed, hide and show relevant list items
    $("#faq_search_input").on('keyup', function (e) {

        var searchTerm = $(this).val();

        if (searchTerm === '') {

            $('.hightlight', $searchResults).remove();
            $li.show();
        }
        // backspace
        if (e.keyCode == 8) {
            $li.show();
        }

        // return key pressed
        if (e.keyCode == 13) {
            e.preventDefault();
        }

        // Find items to hide
        var ItemsToHide = $("li", $searchResults).not(":containsCaseInsensitive(" + searchTerm + ")");
        $(ItemsToHide).hide();

        // Find items to show
        var ItemsToShow = $("h4:containsCaseInsensitive(" + searchTerm + ")", $searchResults).parent();
        $(ItemsToShow).show();
    })
        .on('keydown', function (e) {
            if (e.keyCode == 13) {
                e.preventDefault();
            }
        });

    function stripHighlight($elm) {
        $elm.html($elm.html().replace('<span class="highlight">', ''));
        $elm.html($elm.html().replace('</span>', ''));
        return $elm;
    }
});