javascript - 如何创建此搜索操作

Question

我有一个页面，其中包含以下格式的多种形式:

<form id="new_celebration100001237275604" 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%22mitchellgould7@gmail.com%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>

由于页面可能包含数百个这样的内容，我想为用户提供一个搜索框。当他们开始在框中输入时，我想隐藏与这些字母不匹配的用户的表单和数据，以便他们更容易找到他们的 friend 。

我是一名菜鸟，非常感谢一些帮助来为我指明正确的方向。每个表单都有一个唯一的 ID，如图所示。但是我不知道如何根据 <li>User Name</li> 的值选择表单

如果可能的话，我希望能够使用 jquery 来完成此操作。

Answer 1

这是一个例子。您可以看到它正在运行 here

HTML 添加了 #se​​archBox

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);
        });
    });
});