How to filter items and show items.

Question

Hello, this is what I am planning to do. Suppose I have a list of names (in DIVs)

<div class="person">
Mike Mulky
</div>

<div class="person">
Jenny Sun
</div>

<div class="person">
Jack Kickle
</div>

I would like a text box, where the user can type "Jenny", and filter out the DIV's with "Jenny" in them.

What JQuery plugin can allow me to do this? Or, if you know something easier :) Thanks.

Answer 1

Have a look at :contains() Selector

Answer 2

Something like this should do the trick:

$('.person).each(function(idx, value) {
  if ($(value).text().match(/Jenny/)) {
     // value now holds the element that contains Jenny
  }
});

Answer 3

This should do it:

<input type="text" id="userInput" />

<script type="text/javascript">
$('#userInput').keypress(function(){
    $('div.person').hide().filter(':contains("'+this.value+'")').show();
});
</script>