JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<input type="text" data-class="qsearch" data-filter="ul li" />

<ul class="filter">   
    <li> one </li>
    <li> Two </li>
    <li> Three </li>
    <li> Four </li>
</ul>

JavaScript

$.fn.qSearch = function() { 

    return this.each(function() {
        $(this).on('keyup', function() {
            var self = $(this),
                val = self.val().toLowerCase(),
                nothing = $('<div class="none-found" />'),
                filters = self.data('filter'),
                filterEl = $(filters),
                noneFound = $('.none-found');                
            
            if(!filters) {
                alert('your search input needs a data-filter which is equivalent of the search container');
                return false;
            }
            filterEl.hide();
            
            if(noneFound.length) {
                noneFound.hide();
            }
            
           var x = filterEl.filter(function() {     
               var el = $(this).text().trim().toLowerCase(),
                   word_split,
                   word,
                   wordFinder,
                   originalWord;
               
               if (el != '') {
                   // split words
                   if (/\s/.test(el)) {
                       //console.log('has spaces');
                       word_split = el.split(' ');
                       for (var z = 0; z < word_split.length; z++) {
                           word = word_split[z];
                           wordFinder = word.substr(0, val.length) == val;
                           originalWord = el.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) == val;
                       }
                   }
...