JSFiddle - React, Tailwind, and code Playground

by Michel Plungjan

HTML

<input type="text" value="" id="filter" />
<div id="people">
  <div>
    <p>Joe Blogs</p>
    <img src=".." />
  </div>
  <div>
    <p>Jane Doe</p>
    <img src=".." />
  </div>
</div>

JavaScript

$.extend($.expr[':'], { //http://stackoverflow.com/a/4936066/295783
  'containsi': function(elem, i, match, array)
  {
    return (elem.textContent || elem.innerText || '').toLowerCase()
    .indexOf((match[3] || "").toLowerCase()) >= 0;
  }
});

$(function() {
  $("#filter").on("keyup",function() {
    var val = $(this).val();
    var people = $("#people > div");
    if (val=="") people.show();
    else {
      people.hide()
      $("#people > div:containsi('"+val+"')").show();
    }
  });
});