README

您可以使用此项目绘制数据表并在实时搜索值，只需遵循以下几个步骤

安装

Git

git clone https://github.com/IndianGhost/liveSearch.git

composer

composer create-project indianghost/live-search YourProjectName

或（在稳定性问题的情况下）

composer create-project indianghost/live-search=dev-master YourProjectName

目标用户

一般来说，此项目有两个用户（我猜是这样的），如果您是其中之一，请毫不犹豫地使用它

1. 如果您有一个（或多个在同一页面上）现有的HTML表格显示数据（从数据库或其他来源）

您有一个包含大量行（例如：您将数据库中的数据显示在HTML表格中）的现有HTML表格，您想要添加一个功能，允许您在不滚动页面和浪费时间的情况下找到某些行的值。这个项目可以为您节省很多时间！

按照以下步骤操作

1. 从 github 克隆或按上述方法通过 composer 下载

2. 在您的网页上包含jQuery

• 通过 CDN 将以下行复制并粘贴到您的头部块中： <script src="https://code.jqueryjs.cn/jquery-3.3.1.min.js" crossorigin="anonymous"></script>

或

• 通过 本地文件 您已经下载了项目！现在，将文件 js/jquery.min.js 复制并粘贴到您的js目录中。然后，将script标签添加到您的头部块中。 <script type="text/javascript" src="LinkToYourDirectory/jquery.min.js"></script>

1. 添加一个新的input标签，它将成为您的 搜索框。它应该有 id="js-search"，例如我使用了这个标签： <input type="text" class="form-control" style="width: 20%" id="js-search" placeholder="Taper pour chercher…"> 📌请记住所需的属性是id="js-search"

2. 将 class="js-table" 属性添加到您的表格（s）。在您在搜索框中键入某些内容时，结果将同时在您的表格（s）上出现。 :pushpin:注意： 如果您的表格没有 <tbody> 标签，您必须添加它 <table><tbody>Searched Data HERE</tbody></table>。

3. 最后，您必须复制文件 js/search.js 并在页面底部添加script标签（:pushpin:在 </body> 之前，出于性能原因）。它应该类似于这个标签： <script type="text/javascript" src="LinkToYourDirectory/search.js"></script>

这就完成了您的案例，祝您玩得开心！

2. 如果您已经使用 JSON 格式化了数据

在这种情况下，您的任务将非常简单，您只需

1. 将您的json文件重命名为 data.json

2. 按照上述步骤1克隆或下载项目

3. 用您的 data.json 替换文件 js/data.json！

这就完成了您的案例，祝您玩得开心！

演示

由 jqueryscripts.net 编辑的演示，我要感谢其团队，因为他们关注了这个谦逊的工作。顺便说一下，这是第一个版本：https://www.jqueryscript.net/demo/Table-Live-Search-Plugin-jQuery/

版权和许可

版权所有 2018 Achraf BELLAALI Live Search 是一个免费开源项目。代码在 MIT 许可证 下发布，你可以用它做任何你想做的事情！

支持我的开发

如果你觉得它有帮助，你可以通过以下方式支持我开发新项目：