CODEWITHSUNDEEP
javascriptjquery
Andrei
Andrei

Reputation: 497

Filter HTML content with Javascript by using select list

I have this javascript code, it filters content when you type words in text field. 

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
    var $products = $('#category_list li');
    $('#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();
    });
});//]]>  
</script>

HTML PART:

Search: <input id="filter" />
<ul id="category_list">
    <li><a href="403.php">Sunny</a></li>
    <li><a href="404.php">night</a></li>
</ul>

But now I want to use SELECT list and not input text field, how I must change the JS code?

<select id="filter">
    <option>Sunny</option>
    <option>night</option>
</select>

any ideas?

This is Fiddle!

Upvotes: 0

Views: 391

Answers (1)

daveblake
daveblake

Reputation: 194

Swap keyup to change - as below...

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
    var $products = $('#category_list li');
    $('#filter').change(function() {
        var re = new RegExp($(this).val(), "i"); // "i" means it's case-insensitive
        $products.show().filter(function() {
            return !re.test($(this).text());
        }).hide();
    });
});//]]>  
</script>

Upvotes: 1

Related Questions