Search Box which instantly filters a html table?

Question

I have a HTML table which pulls from a MySQL DB like so...

ID  NAME             COST    POSITION  SCORE
1   John Johnson     4.5     Mid       28
2   Mark Markson     6.1     Atk       41
3   Larry Lawrenson  5.6     Def       38    
4   Paul Paulson     5.4     Mid       32

etc...

I am looking to have a search box on top of this table which instantly filters the data based on what you type in (instantly - as in, without pressing a submit box or anything). For example if you type Mid in the search box, only 2 of the above users will appear and the rest will be hidden from view.

I tried googling for "spotlight search php" but all of the searches I found were like google.com or apple.com style where it gives you a list of searches rather than filtering the table that's already on the screen.

This looks promising... Would it do what I'm trying to do?

Does anyone have any tips or links to somewhere that does this? Or even if I'm calling it the right name. Also, if what I'm asking is unclear, please let me know and I'll try clarify.

Answer 1

I believe this is what you are looking for.

http://www.datatables.net/release-datatables/examples/basic_init/zero_config.html

dataTables will search current html table, and display only rows that match with search term (Case-insensitive). This has sorting enabled by default. You can configure it to not sort at all.

Answer 2

Yes, the article you referenced should accomplish what you're looking for.

You might also consider using the jQuery Autocomplete plugin to call back to your server. The server can respond to that query with the data from the appropriate rows.