Question

I am working on a website,
I have a page containing a list of persons built like this:

<div class="personsMenu">
    <div class="person">
        <div class="name">John</div>
        <div class="age">18</div>
    </div>
    <div class="person">
        <div class="name">Kate</div>
        <div class="age">24</div>
    </div>
    <div class="person">
        <div class="name">Tom</div>
        <div class="age">17</div>
    </div>
</div>

I also have a textbox <input type="Text" id="filterTextBox"/>

Using jquery i need to do the following:

When the user start typing in the textbox the divs where the “name” does not contain the characters disappears (some sort of a dynamic filter, you only see the persons who’s name contains the written characters)

So the logic should be like this:

When the user type a character in the textbox (or remove one) we loop through all the “person” divs and if the “name” div inside that “person” contains the characters we show it, otherwise we hide it (.show() and .hide() in jquery)

And of course if the textbox is empty we show everything.

Can this be done?

Thanks for any help

Answer 1

At every keystroke, you could .toggle() each .person, passing a variable indicating whether or not it matches the current value, and should thus be shown.

$('.my-textbox').keyup(function() {
    var value = $(this).val();
    var exp = new RegExp('^' + value, 'i');

    $('.personsMenu .person').each(function() {
        var isMatch = exp.test($('.name', this).text());
        $(this).toggle(isMatch);
    });
});​

Modify the expression as you see fit. In this version, it checks that the name starts with the value entered, and ignores casing.

Demo