Download the PHP package indianghost/live-search without Composer
On this page you can find all versions of the php package indianghost/live-search. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download indianghost/live-search
More information about indianghost/live-search
Files in indianghost/live-search
Package live-search
Short Description It's a plugin allows to dress and search data on HTML page at realtime built using the library jquery
License MIT
Informations about the package live-search
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
Install
Git
composer
Or (in case of stability issues)
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>
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>
- via CDN
copy & paste this line on your head block:
-
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" -
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/
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 :