立即过滤html表格的搜索框？答案

【问题标题】：Search Box which instantly filters a html table?立即过滤html表格的搜索框？
【发布时间】：2017-08-01 04:05:37
【问题描述】：

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

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 个，其余用户将被隐藏。

我尝试在谷歌上搜索“spotlight search php”，但我发现的所有搜索都类似于 google.com 或 apple.com 风格，它会为您提供搜索列表，而不是过滤屏幕上已有的表格。

This 看起来很有希望......它会做我想做的事吗？

有没有人有任何提示或链接到这样做的地方？或者即使我称它为正确的名字。另外，如果我的问题不清楚，请告诉我，我会尽力澄清。

【问题讨论】：

是页面上的所有表格数据都以开头，还是需要根据输入从服务器获取？
@ultranaut 目前，所有数据都从 MySQL 数据库中获取并以表格的形式显示在页面上。我希望它显示所有内容，然后根据在搜索框中输入的内容进行过滤。

标签： php search html-table

【解决方案1】：

我相信这就是您正在寻找的。

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

dataTables 将搜索当前的 html 表，并仅显示与搜索词匹配的行（不区分大小写）。默认情况下启用排序。您可以将其配置为根本不排序。

【讨论】：

【解决方案2】：

是的，您引用的文章应该可以满足您的需求。

您也可以考虑使用jQuery Autocomplete plugin 回调您的服务器。服务器可以使用相应行中的数据响应该查询。

【讨论】：

谢谢 - 我现在就试一试。我看到了一些使用该插件的示例，但它们是另一种聚光灯式搜索，所以我没有深入研究。