indianghost/live-search

It's a plugin allows to dress and search data on HTML page at realtime built using the library jquery

Welcome to LiveSearch

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

Install

Git

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

composer

composer create-project indianghost/live-search YourProjectName

Or (in case of stability issues), _(*2)

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:, _(*3)

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 !, _(*4)

Follow these steps

1. clone it from github or download it via composer as mentioned above, _(*5)

2. include jquery on your webpage:, _(*6)

   • 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, _(*7)

• 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…"> :pushpin:Remember the required attribute is id="js-search", _(*8)

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). :pushpin:Notice: if your table has not the tag <tbody> you must add it <table><tbody>Searched Data HERE</tbody></table>., _(*9)

3. 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>, _(*10)

That's all for your case, enjoy !, _(*11)

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:, _(*12)

1. rename your json file to data.json, _(*13)

2. clone or download the project (step 1 above), _(*14)

3. replace the file js/data.json by your data.json !, _(*15)

That's all for your case, enjoy !, _(*16)

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/, _(*17)

, _(*18)

, _(*19)

, _(*20)

, _(*21)

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 !, _(*22)

Support My development

If you found it helpful, you can support me to develop new projects By : , _(*23)