JSFiddle - React, Tailwind, and code Playground

by csornmo

HTML

<input type="text" id="input" placeholder="Type to filter..." />


<div class="filter">

	<!-- COLOR -->
    <div class="filter__options--header">
        <span>Color</span>
    </div>
    <div class="filter__options--content">
        <ul>
            <li>
                <label class="filter__options-checkbox">Yellow</label>
            </li>
            <li>
                <label class="filter__options-checkbox">Blue</label>
            </li>
            <li>
                <label class="filter__options-checkbox">Red</label>
            </li>
            <li>
                <label class="filter__options-checkbox">Green</label>
            </li>
        </ul>
    </div>
	
	
	<!-- SIZE -->
    <div class="filter__options--header">
        <span>Size</span>
    </div>
    <div class="filter__options--content">
        <ul>
            <li>
                <label class="filter__options-checkbox">Small</label>
            </li>
            <li>
                <label class="filter__options-checkbox">Medium</label>
            </li>
            <li>
                <label class="filter__options-checkbox">Large</label>
            </li>
        </ul>
    </div>



</div>

CSS

#input {
	padding: 10px;
	margin-bottom: 20px;
	font-size: 18px;
}

.filter__options--header {
	font-size: 18px;
	font-weight: bold;
	border-top: 1px solid #aaa;
	padding: 10px 10px 0;
}

JavaScript

$('input').keyup(function(i) {
    var filter = $('input').val().toUpperCase();

    $('li').each(function(i) {
        var name = $(this).find('.filter__options-checkbox').text();
		var heading = $(this).closest('.filter__options--content').prev('.filter__options--header').text();

        if (heading.toUpperCase().match(filter) != null) {
            $(this).css('display', 'list-item');
        } else if (name.toUpperCase().match(filter) != null) {
            $(this).css('display', 'list-item');
        } else {
            $(this).css('display', 'none');
        }

    });

});