JSFiddle - React, Tailwind, and code Playground

by GeekyEggo

HTML

<div id="faq">
    <p><label>Search</label><br />
<input id="search" value="" size="30" /></p>
<p>&nbsp;</p>
<ul id="result">
  <li><strong>How round is the Earth?</strong><br /><br /><em>
  Very round.
  <br /><br /></em></li>
  <li><strong>How rectangular is paper?</strong><br /><br /><em>
  Very rectangular.
  <br /><br /></em></li>
</ul>
</div><!-- #faq -->

CSS

#faq EM {
display:none;
}

#faq LI STRONG {
font-weight:normal;
color:#246;
text-decoration:underline;
cursor:pointer;
}

JavaScript

$('LI STRONG').click(function(e) {
    e.preventDefault(); // disable text selection
    
    $('EM', $(this).parent()).slideToggle();
    
    return false; // disable text selection
});

$('#search').keyup(function(e) {      
    // create the regular expression
    var regEx = new RegExp($.map($(this).val().trim().split(' '), function(v) {
        return '(?=.*?' + v + ')';
    }).join(''), 'i');
    
    // select all list items, hide and filter by the regex then show
    $('#result li').hide().filter(function() {
        return regEx.exec($(this).text());
    }).show();
});