Filter table data with Jquery based on HTML input

Question

Can you please help me code Jquery right way so i can filter HTML table based on text input. So far this is my code:

    <input type="text" name="inputdata" id="inputdata" onkeyup="filter()">
    <table>
            <tr>
                <th>ID</th>
                <th>Name</th>
            </tr>
            <tr name="data">
               <?php foreach ($products as $row) { ?>
                 <td><?php echo $row->id_product; ?></td>
                 <td><?php echo $row->name; ?></td>
               <?php }  ?>
            </tr>

Jquery code

<script>
    function filter(){
        inp = $('#inputdata').val()
        $("tr").filter(function() {
            return $(this).text().indexOf(inp) == -1;
        }).hide();
    }
</script>

So my problems are:

Search is case sensitive
When i input some string, let's say Pants, Jquery filters data, but then i have to refresh a page, so i can search again. Or let me put this other way... When i delete inputted data in search field, table isn't refreshed. It just stay on Pants data, so for another search i have to reload web page
<th> are removed when searching for data. If i declare $('tr[name=data]').filter(function() { search stop working

thx in advance for helping me!

What did you try and what is wrong?

Jack M.
– Jack M.

2014-02-24 21:04:58 +00:00
Commented Feb 24, 2014 at 21:04 — Jack M.
– Jack M., Commented Feb 24, 2014 at 21:04
I have writed down my 3 problems under the code...

Valor_
– Valor_

2014-02-24 21:09:07 +00:00
Commented Feb 24, 2014 at 21:09 — Valor_
– Valor_, Commented Feb 24, 2014 at 21:09
Those aren't problems, they are requests.

Jack M.
– Jack M.

2014-02-24 21:10:15 +00:00
Commented Feb 24, 2014 at 21:10 — Jack M.
– Jack M., Commented Feb 24, 2014 at 21:10

Goran.it · Accepted Answer · 2014-02-24 21:20:40Z

3

This should take care of your issues:

<script>
function filter(){
    inp = $('#inputdata').val()
    // This should ignore first row with th inside
    $("tr:not(:has(>th))").each(function() {
        if (~$(this).text().toLowerCase().indexOf( inp.toLowerCase() ) ) {
            // Show the row (in case it was previously hidden)
            $(this).show();
        } else {
            $(this).hide();
        }
    });
}
</script>

edited Feb 24, 2014 at 21:20

answered Feb 24, 2014 at 21:11

Goran.it

6,3772 gold badges25 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Valor_ Over a year ago

Dude you totaly fixed first two problems! thank you kind sir! Thank you

Goran.it Over a year ago

I've added also a fix for the 3th issue (rows with th are now ignored)

Valor_ Over a year ago

Yep, this totaly did it! Really thank you for that. Look like i got still much to learn, how to handle Jquery code.

Goran.it Over a year ago

Yw.. btw you have the same last name as my uncle :D

Valor_ Over a year ago

No way! :) Where is your uncle from? Probably you are Italian and your uncle is from Slovenia or Croatia... Did i guess right? :)

|

Collectives™ on Stack Overflow

Filter table data with Jquery based on HTML input

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related