JSFiddle - React, Tailwind, and code Playground

by bruth

HTML

<script src="https://raw.github.com/bruth/jquery.fn.search/master/jquery.fn.search.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<input type=text value=lorem>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla magna diam, mattis nec adipiscing vel, auctor eleifend felis. Mauris cursus erat sollicitudin metus feugiat eget ullamcorper felis vestibulum.</p>

<p>Phasellus lobortis sollicitudin diam quis tempus. Proin egestas vehicula sem a elementum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus porta odio id vehicula. Curabitur suscipit, lorem sit amet condimentum tincidunt, libero ipsum malesuada leo, ultrices mollis libero tellus nec ante.</p>

<p>Quisque lacinia facilisis mollis.</p>

<p>Sed nec lacus ut ante interdum cursus non sit amet risus. Curabitur id neque ac lorem accumsan rutrum. Donec mi tortor, viverra sit amet lacinia nec, bibendum a augue.</p>

<p>Nulla facilisis, neque placerat tempor bibendum, ligula lectus pharetra purus, eget porttitor quam eros et ipsum. Nunc eu metus nisl.</p>

<p>Cras nisl elit, laoreet et luctus non, ultricies quis magna. Phasellus consectetur magna id dui sagittis et laoreet elit adipiscing.</p>

<p>Phasellus lobortis gravida diam quis lobortis. Nunc nec convallis libero. Etiam vel velit arcu, vel ullamcorper urna. Praesent posuere justo in justo aliquet id dignissim purus vulputate. Ut leo nisl, venenatis vel dictum in, eleifend at justo. Etiam cursus, mauris at cursus sodales, dolor erat ullamcorper neque, non blandit lacus nibh a felis. Quisque et arcu eu velit blandit porttitor.</p>

CSS

.highlight {
    box-shadow: 0 1px 2px #ccc;
    background-color: yellow;
}

input { margin-bottom: 14px; }

JavaScript

var input = $('input'),
    paras = $('p').search();
    
input.keyup(function() {
    paras.search(input.val());
});
    
// trigger on load
input.keyup();