You can use this project to draw a table of data and to search values at realtime, just by following these few steps
git clone https://github.com/IndianGhost/liveSearch.git
composer create-project indianghost/live-search YourProjectName
Or (in case of stability issues)
composer create-project indianghost/live-search=dev-master YourProjectName
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 !
-
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>
OR
- 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 !
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 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/
Copyright 2018 Achraf BELLAALI Live Search is a free open-source project. The code is released under The MIT LICENSE you can do whatever you want with it !
If you found it helpful, you can support me to develop new projects By :
