搜索框立即过滤html表？ [英] Search Box which instantly filters a html table?

问题描述

我有一个从MySQL数据库中提取的HTML表格，如此...

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

等......

我希望在这张桌子的顶部有一个搜索框根据您输入的内容立即过滤数据（即时 - 如同，无需按下提交框或任何内容）。例如，如果您在搜索框中输入 Mid ，则只会显示上述用户中的2个，其余用户将无法查看。

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.

我尝试使用谷歌搜索聚光灯搜索php，但我发现的所有搜索都是google.com或apple.com风格，它会为您提供搜索列表，而不是过滤已经在屏幕上的表格。

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.

推荐答案

我相信这就是你要找的东西。

I believe this is what you are looking for.

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

dataTables将搜索当前的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.

这篇关于搜索框立即过滤html表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！