JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<input id="quick-search"/>
<div class="search-container" data-filter="lyndsey browning"> Lyndsey browning </div>
<div class="search-container" data-filter="dy"> Dy </div>
<div class="search-container" data-filter="test"> Test </div>
<div class="search-container" data-filter="lyndsey"> Lyndsey </div>

JavaScript

/* Keyup filter form 
     * that searches for companies based 
     * on the Quick Search value 
     */
    var search = $('#quick-search'),
            filters = $('[data-filter]'),
            container = $('.search-container'),            
            box = $('.box-container');

    // keyup captures every key pressed
    search.on('keyup', function (e) {
        var self = $(this);
        // force the value in quick search to lower case
        var val = self.val().toLowerCase();
        // no companies found text
        var nothing = $('.none-found');

        // hide al companies and texts by default
        filters.hide();
        nothing.remove();

        // set default text
        // start filtering companies that match 
        // the quick search value  
        var x = container.filter(function () {
            var filterData = $(this).data('filter');
            var _filter = filterData.split(';');
            for (var i = 0; i < _filter.length; i++) {
                var el = _filter[i];
                var original = _filter[i];
                if (el != '') {
                    // split words
                    if (/\s/.test(el)) {
                        //console.log('has spaces');
                        var word_split = el.split(' ');
                        for (var z = 0; z < word_split.length; z++) {
                            var word = word_split[z];
                            var wordFinder = word.substr(0, val.length) == val;
                            var originalWord = original.substr(0, val.length) == val;                            

                            if (wordFinder || originalWord ) {                              
                                return wordFinder || originalWord;
                            }
                        }
                    }
                    else {
                        if (el.substr(0, val.length) == val) {
                            return el.substr(0, val.length) ==...