CODEWITHSUNDEEP
javascriptjquery
Andrei
Andrei

Reputation: 497

JS condition to hide an element

Hello i have this cool script which filters a list of words when some one types inside an input some letters, I really hope this will be also useful for other people.

You can see it in action here: FIDDLE

My code:

<input id="filter" />
<ul id="productlist">
    <li><h2>Andy</h2><span>some text</span></li>
    <li><h2>Sandra</h2><span>some text</span></li>
    <li><h2>Pizza</h2><span>some text</span></li>
    <li><h2>Drink</h2><span>some text</span></li>
</ul>

var $products = $('#productlist li h2');
$('#filter').keyup(function() {
    var re = new RegExp($(this).val(), "i"); // "i" means it's case-insensitive
    $products.show().filter(function() {
        return !re.test($(this).text());
    }).hide();
});

So i need it to hide not only H2 but the whole li element with the content inside it.

PS: please dont tell me to change from var $products = $('#productlist li h2'); to var $products = $('#productlist li'); i need the search to work only for h2 element

Upvotes: 1

Views: 72

Answers (1)

Jamiec
Jamiec

Reputation: 136074

You should be able to just do:

var $products = $('#productlist li');
$('#filter').keyup(function() {
    var re = new RegExp($(this).val(), "i"); // "i" means it's case-insensitive
    $products.show().filter(function() {
        return !re.test($('h2',this).text());
    }).hide();
});

Live example: http://jsfiddle.net/7CVgL/

(Note: Ive done what you asked me not to do, but it still searches only the content of the h2 element)

Upvotes: 1

Related Questions