Question

I have a page with many forms on it.

Each form has a unique id.
Each form has a user name field.

Example:

<form id="new_celebration692130342" accept-charset="UTF-8" action="/celebrations" method="post">
<input id="friend" type="hidden" name="celebration[friend_name]" value="Anthony Rosenfeld">
<input id="friend" type="hidden" name="celebration[friend_fbuid]" value="69213034***2">
<input id="friend" type="hidden" name="celebration[friend_birthday]" value="12/09">
<input id="friend" type="hidden" name="celebration[friend_pic]" value="http://graph.facebook.com/69213034***2/picture">
<li>Anthony Rosenfeld</li>
<li>12/09</li>
<input class="button-mini-subtle submit" type="submit" alt="select" value="select">
</form>

I want to give the user the ability to enter a name or start typing in a search box and the javascript/jquery will run and only show the forms with a name field that matches.

I am a major NOOB with this type of action and would appreciate being pointed in the right direction.

Answer 1

$(function () {

  $("#searchBox").keypress(function () {

    console.log($('input[name~="' + $(this).val() + '"]').parent('form'));

  });

});

This will log to the console all form elements which have an input child with a name that matches the searchBox value.