JSFiddle - React, Tailwind, and code Playground
HTML
<div class="div-sieve">
<div> <a href="#">Question 1?</a>
<br />The lysine contingency - it's intended to prevent the spread of the animals is case they ever got off the island. Dr. Wu inserted a gene that makes a single faulty enzyme in protein metabolism. The animals can't manufacture the amino acid lysine. Unless they're continually supplied with lysine by us, they'll slip into a coma and die.</div>
<div> <a href="#">Question 2?</a>
<br />Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.</div>
</div>
<div class="noresults">Sorry, could not find what you are looking for.</div>
CSS
.div-sieve {
margin-top:10px;
}
.div-sieve div {
background-color:#eeeeee;
margin-bottom:10px;
padding:10px;
}
div.noresults {
background-color:#eeeeee;
margin-bottom:10px;
padding:10px;
display:none;
}
JavaScript
/*!
* jQuery Sieve v0.3.0 (2013-04-04)
* http://rmm5t.github.io/jquery-sieve/
* Copyright (c) 2013 Ryan McGeary; Licensed MIT
*/ (function () {
var $;
$ = jQuery;
$.fn.sieve = function (options) {
var compact;
compact = function (array) {
var item, _i, _len, _results;
_results = [];
for (_i = 0, _len = array.length; _i < _len; _i++) {
item = array[_i];
if (item) {
_results.push(item);
}
}
return _results;
};
return this.each(function () {
var container, searchBar, settings;
container = $(this);
settings = $.extend({
searchInput: null,
searchTemplate: "<div><label>Search: <input type='text'></label></div>",
itemSelector: "tbody tr",
textSelector: null,
toggle: function (item, match) {
return item.toggle(match);
},
complete: function () {}
}, options);
if (!settings.searchInput) {
searchBar = $(settings.searchTemplate);
settings.searchInput = searchBar.find("input");
container.before(searchBar);
}
return settings.searchInput.on("keyup.sieve change.sieve", function () {
var items, query;
query = compact($(this).val().toLowerCase().split(/\s+/));
items = container.find(settings.itemSelector);
items.each(function () {
var cells, item, match, q, text, _i, _len;
item = $(this);
if (settings.textSelector) {
cells = item.find(settings.textSelector);
text = cells.text().toLowerCase();
} else {
text = item.text().toLowerCase();
...