๐Ÿ”” Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

liveSearch.js is a minimal jQuery table filter plugin which allows to filter rows of an html table based on user input.

table-filter

Documentation

Welcome to LiveSearch version2 Packagist

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 

Inteded 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

  1. clone it from github or download it via composer as mentionned above

  2. 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>
  1. 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"

  2. 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). ๐Ÿ“ŒNotice: if your table has not the tag <tbody> you must add it <table><tbody>Searched Data HERE</tbody></table>.

  3. Finally, You must copy the file js/search.js and add the script tag at the bottom of page (๐Ÿ“Œ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:

  1. rename your json file to data.json

  2. clone or download the project (step 1 above)

  3. 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/

alt text

alt text

alt text

alt text

Copyright and license

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 !

Support My development

If you found it helpful, you can support me to develop new projects By : Donate


You May Also Like