JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<input id="search" value=""/>
<ul id="result">
  <li>How round is the Earth?</li>
  <li>How rectangular is paper?</li>
</ul>

JavaScript

//http://stackoverflow.com/questions/11702120/searching-with-jquery-work-for-multiple-terms
/*
$('#search').keyup(function(e) {
    var s = $(this).val().trim();
    if (s === '') {
        $('#result li').show();
        return true;
    }

    $('#result li').hide();
    splits = s.split(" ");

    for(x in splits){
        $('#result li:contains(' + splits[x]+ ')').show();
    }
    return true;
});
*/

$('#search').on("input", function(e) {
    var words = $(this).val().toLowerCase().match(/\S+/g);
    if (!words) {
        $('#result li').show();
    } else {
        $('#result li').each(function() {
            var text = $(this).text().toLowerCase();
            var show = false;
            $.each(words, function(i, word) {
                show = show || Boolean(~text.indexOf(word));
            });
            $(this).toggle(show);
        });
    }
});
/*
$('#search').on("input", function(e) {
    var words = $(this).val().toLowerCase().match(/\S+/g);
    if (!words) {
        $('#result li').show();
    } else {
        $('#result li').each(function() {
            var text = $(this).text().toLowerCase();
            var show = words.some(function(word) {
                return ~text.indexOf(word);
            });
            $(this).toggle(show);
        });
    }
});*/