JSFiddle - React, Tailwind, and code Playground

by iambriansreed

HTML

<label for="search">Search Input:</label>
    <input type="search" name="filter" id="search" value="" />
    <div data-filter="one">one</div>
    <div data-filter="two">two</div>
    <div data-filter="three">three</div>
    <div data-filter="four">four</div>
    <div data-filter="five">five</div>

CSS

[data-filter] {
    display: none;
}

JavaScript

$(function(){
    var filter_div = $('[data-filter]');
    $('#search').keyup(function(event){
        if(event.which == 13){
            this.value = '';
            $(this).blur();
            return;
        }
        var val = $.trim(this.value);
        filter_div.hide();
        if(val.length == 0) return;
        filter_div.filter(function(){            
            return $(this).data('filter').indexOf(val)>-1
        }).show();

        }).blur(function(){
            this.value = '';
            filter_div.hide();
        });
});