JSFiddle - React, Tailwind, and code Playground

by Emre Erkan

HTML

<input type="text" id="searchBox" />

<form id="new_celebration100001237275601" accept-charset="UTF-8" action="/celebrations" method="post">
    <input id="friend" type="hidden" name="celebrant_details" value="%7B%22name%22%3A%22Venessa%20Stackpole%22%2C%22provider_user_id%22%3A%22100001237275604%22%2C%22birthday%22%3A%2212/10%22%2C%22provider_name%22%3A%22Facebook%22%7D">
    <input id="manager" type="hidden" name="manager_details" value="%7B%22name%22%3A%22Mitchell%20Gould%22%2C%22provider_user_id%22%3A%22751640040%22%2C%22birthday%22%3A%2210/07/1967%22%2C%22email%22%3A%[email protected]%22%2C%22provider_name%22%3A%22Facebook%22%7D">
    <li>Venessa Stackpole</li>
    <li>12/10</li>
    <li>
    <img src="http://graph.facebook.com/100001237244444/picture">
    </li>
    <input class="button-mini-subtle submit" type="submit" alt="select" value="select">
</form>
<form id="new_celebration100001237275602" accept-charset="UTF-8" action="/celebrations" method="post">
    <input id="friend" type="hidden" name="celebrant_details" value="%7B%22name%22%3A%22Venessa%20Stackpole%22%2C%22provider_user_id%22%3A%22100001237275604%22%2C%22birthday%22%3A%2212/10%22%2C%22provider_name%22%3A%22Facebook%22%7D">
    <input id="manager" type="hidden" name="manager_details" value="%7B%22name%22%3A%22Mitchell%20Gould%22%2C%22provider_user_id%22%3A%22751640040%22%2C%22birthday%22%3A%2210/07/1967%22%2C%22email%22%3A%[email protected]%22%2C%22provider_name%22%3A%22Facebook%22%7D">
    <li>Melissa Meyer</li>
    <li>12/10</li>
    <li>
    <img src="http://graph.facebook.com/100001237244444/picture">
    </li>
    <input class="button-mini-subtle submit" type="submit" alt="select" value="select">
</form>
<form id="new_celebration100001237275603" accept-charset="UTF-8" action="/celebrations" method="post">
    <input id="friend" type="hidden" name="celebrant_details"...

JavaScript

var $forms = $('form');
$(function() {
    $('#searchBox').keyup(function() {
        var $form, needle = $(this).val().toLowerCase(), haystack;
        $forms.each(function() {
            $form = $(this);
            haystack = $form.find('li:first').text().toLowerCase();
            $form.toggle(haystack.indexOf(needle) > -1);
        });
    });
});