https://github.com/indianghost/livesearch

Live Search Plugin is an amazing jQuery plugin developed by Achraf BELLAALI allows you to search in any table HTML at the real time
https://github.com/indianghost/livesearch

achraf-bellaali composer database html-table indianghost jquery jquery-ajax jquery-datatables jquery-plugin json livesearch research-data research-tool table-html

Last synced: about 4 hours ago
JSON representation

Live Search Plugin is an amazing jQuery plugin developed by Achraf BELLAALI allows you to search in any table HTML at the real time

• Host: GitHub
• URL: https://github.com/indianghost/livesearch
• Owner: IndianGhost
• License: mit
• Created: 2018-01-25T16:00:28.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-02-15T22:31:01.000Z (over 2 years ago)
• Last Synced: 2024-04-19T06:43:00.048Z (7 months ago)
• Topics: achraf-bellaali, composer, database, html-table, indianghost, jquery, jquery-ajax, jquery-datatables, jquery-plugin, json, livesearch, research-data, research-tool, table-html
• Language: HTML
• Size: 232 KB
• Stars: 8
• Watchers: 3
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Welcome to LiveSearch ![version2](https://img.shields.io/badge/version-2.0.1-green.svg) [![Packagist](https://img.shields.io/packagist/l/doctrine/orm.svg)](https://github.com/IndianGhost/liveSearch/blob/master/LICENSE)

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

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

2. include jquery on your webpage:

  - _via CDN_

  copy & paste this line on your head block:

  ``

  

  OR

  

  - _local file_

  You downloaded the project ! well, now copy the file [**js/jquery.min.js**](https://github.com/IndianGhost/liveSearch/blob/master/js/jquery.min.js) and paste it in your js directory. Then, add the tag script to your head block.

  ``

3. add a new input tag, it will be your **search box**. it should have the `id="js-search"`, for example I used this tag :

  ``

  :pushpin:**Remember the required attribute is id="js-search"**

  

4. 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 `` you must add it `Searched Data HERE`.

5. Finally, You must copy the file [**js/search.js**](https://github.com/IndianGhost/liveSearch/blob/master/js/search.js) and add the script tag at the bottom of page (:pushpin:just before `