README

You can use this project to draw a table of data and to search values at realtime, just by following these few steps

Install

Git

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

composer

composer create-project indianghost/live-search YourProjectName

Or (in case of stability issues)

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

Intended users

Generally here are two users for this project (I guess so), if you are one of them don't hesitate to use it:

1. In case you have one (or many in the same page) existing HTML table displays data (from a database or whatever):

You have an existing HTML table contains a lot of rows (for example: You display data from database into an HTML table), you want to add a functionality that allows you to find values of some row without scrolling page and wasting your time. This project can save you bro !

Follow these steps

clone it from github or download it via composer as mentioned above
include jquery on your webpage:

via CDN copy & paste this line on your head block: <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

local file You downloaded the project ! well, now copy the file js/jquery.min.js and paste it in your js directory. Then, add the tag script to your head block. <script type="text/javascript" src="LinkToYourDirectory/jquery.min.js"></script>

add a new input tag, it will be your search box. it should have the id="js-search", for example I used this tag : <input type="text" class="form-control" style="width: 20%" id="js-search" placeholder="Taper pour chercher…"> 📌Remember the required attribute is id="js-search"
add an attribute class="js-table" to your table(s). When you type something in the search box the result will appear simultaneously on your table(s). :pushpin:Notice: if your table has not the tag <tbody> you must add it <table><tbody>Searched Data HERE</tbody></table>.
Finally, You must copy the file js/search.js and add the script tag at the bottom of page (:pushpin:just before </body> for performance reasons). It should be similar to this tag : <script type="text/javascript" src="LinkToYourDirectory/search.js"></script>

That's all for your case, enjoy !

2. In case you have data already formatted using JSON:

In this case your task will be a piece of cake all you have to do is:

rename your json file to data.json
clone or download the project (step 1 above)
replace the file js/data.json by your data.json !

That's all for your case, enjoy !

Demonstration

Demonstration edited by jqueryscripts.net I'm thankful to its team because they paid attention to this modest work, By the way this is the first version: https://www.jqueryscript.net/demo/Table-Live-Search-Plugin-jQuery/