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>

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

我是NOOB，非常感谢帮助指出我正确的方向。每个表单都有一个唯一的ID，如图所示。但是我不知道如何根据<li>User Name</li>

的值来选择表单

如果可能的话，我希望能够用jquery做到这一点。

Answer 1

这是一个例子。您可以看到它正常工作here

HTML #searchBox已添加

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

Answer 2

通常我会给你的li上课，例如：

<li class="username">User Name</li>

然后使用'$（“li.username”）'查找所有li和过滤器。对于过滤器，您需要根据用户输入创建一个新的RegEx对象，并匹配li内的文本。然后对已过滤的parentUntil("form")执行li以查找表单。

我还没有触及jQuery很长一段时间，可能在语法上有些错误。但是这种方法应该是正确的，因为我在多个实例中使用它。

如何创建此搜索操作

2 个答案: