jQuery - Trying to filter divs on keyup

Question

Revised Code

jQuery(function($) {
$("#filter").keyup(function () {
    var filter = $(this).val(), count = 0;
    $(".filtered h2").each(function () {
    if ($(this).text().search(new RegExp(filter, "i")) != -1) {
            $(this).parent().addClass("hidden");
    } else {
            $(this).parent().removeClass("hidden");
            count++;
    }
    $("#filter-count").text(count);
    });
});

});

I have a number of divs that are listed and I want to be able to add an input field that will allow a user to start typing and the divs are filtered according to each divs h2 tag. I'm trying the code below, but it's not filtering. It's not throwing up any errors either, so I'm not sure what to do at this point...

Here's the html markup:

    <input id="filter" name="filter" size="40"/>

    <div class="filtered">

        <div class="archive-row clearfix">
             <label>Creator: </label><h2 class="hidden">Alchemy</h2>
                <label>Title: </label> <p>Cras velit eros, eleifend ut viverra </p>
                <label>Summary: </label><p>Etiam lobortis, risus a dignissim tempor, neque sapien lobortis mi, quis semper sapien nisi dictum nisi. Integer neque neque</p>
        </div>

     <div class="archive-row clearfix">
         <label>Creator: </label><h2 class="hidden">Mathematics</h2>
            <label>Title: </label> <p>Cras velit eros, eleifend ut viverra </p>
            <label>Summary: </label><p>Etiam lobortis, risus a dignissim tempor, neque sapien lobortis mi, quis semper sapien nisi dictum nisi. Integer neque neque</p>
        </div>

     <div class="archive-row clearfix">
         <label>Creator: </label><h2 class="hidden">English</h2>
            <label>Title: </label> <p>Cras velit eros, eleifend ut viverra </p>
            <label>Summary: </label><p>Etiam lobortis, risus a dignissim tempor, neque sapien lobortis mi, quis semper sapien nisi dictum nisi. Integer neque neque</p>
        </div>

    </div>

Here's the jquery...

$(document).ready(function() {

$("#filter").keyup(function () {
    var filter = $(this).val(), count = 0;
    $(".filtered h2").each(function () {
 if ($(this).text().search(new RegExp(filter, "i")) < 0) {
            $(this).addClass("hidden");
 } else {
            $(this).removeClass("hidden");
            count++;
 }
    });
    $("#filter-count").text(count);
});

});

Answer 1

    <input id="filter" name="filter" size="40"/>

    <div class="filtered">

        <div class="archive-row clearfix">
             <label>Creator: </label><h2 >Alchemy</h2>
                <label>Title: </label> <p>Cras velit eros, eleifend ut viverra </p>

                <label>Summary: </label><p>Etiam lobortis, risus a dignissim tempor, neque sapien lobortis mi, quis semper sapien nisi dictum nisi. Integer neque neque</p>
        </div>

     <div class="archive-row clearfix">
         <label>Creator: </label><h2 >Mathematics</h2>
            <label>Title: </label> <p>Cras velit eros, eleifend ut viverra </p>

            <label>Summary: </label><p>Etiam lobortis, risus a dignissim tempor, neque sapien lobortis mi, quis semper sapien nisi dictum nisi. Integer neque neque</p>
        </div>

     <div class="archive-row clearfix">
         <label>Creator: </label><h2>English</h2>
            <label>Title: </label> <p>Cras velit eros, eleifend ut viverra </p>

            <label>Summary: </label><p>Etiam lobortis, risus a dignissim tempor, neque sapien lobortis mi, quis semper sapien nisi dictum nisi. Integer neque neque</p>
        </div>

    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"&gt;&lt;/script&gt;
    <script>
$(document).ready(function() {

    $("#filter").keyup(function () {
    var filter = $(this).val(), 
        count = 0;

    $(".filtered h2").each(function () {
        var parent = $(this).parent(), length = $(this).text().length>0;

        if ( length && $(this).text().search(new RegExp(filter, "i")) < 0) {
     parent.hide();
         } else {
     parent.show();
     count++;
         }
    });
    $("#filter-count").text(count);
    });

});

</script>
<div id="filter-count"></div>

Answer 2

It appears you're using the .each() function on the actual H2 tags and adding/removing the hidden class from those as well. My guess is, you want to be adding/removing the hidden class from the div itself and not the H2?

$(document).ready(function() {
    $("#filter").keyup(function () {
     var filter = $(this).val(), count = 0;
     $(".filtered h2").each(function () {
      if ($(this).text().search(new RegExp(filter, "i")) < 0) {
       $(this).parent().addClass("hidden");
      } else {
       $(this).parent().removeClass("hidden");
       count++;
      }
     });
     $("#filter-count").text(count);
    });
});

Answer 3

I may be wrong but I think you want to hide the parent div so a call to parent should solve this issue.

$(document).ready(function() {

    $("#filter").keyup(function () {
        var filter = $(this).val(), 
            count = 0;
        $(".filtered h2").each(function () {
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).parent().addClass("hidden");
            } else {
                $(this).parent().removeClass("hidden");
                count++;
            }
        });
        $("#filter-count").text(count);
    });
});