0

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Cully
  • 484
  • 9
  • 19
  • Is all of the table data on the page to begin with, or are you needing to fetch it from the server based on the input? – ultranaut Mar 13 '13 at 01:11
  • @ultranaut at the moment, all data is fetched from a MySQL database and displayed on the page in a table. I want it to display everything, then filter based on what's typed in search box. – Cully Mar 13 '13 at 01:18

2 Answers2

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.

kidonchu
  • 785
  • 1
  • 9
  • 20
0

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.

Eric S
  • 1,363
  • 1
  • 10
  • 20
  • Thanks - I'll give that a try now. I saw some examples using that plugin, but they were the other spotlight style search so I didn't look much into it. – Cully Mar 13 '13 at 01:19