Jquery highlight search text plugin Gsearch on the webpage in a easy way.

hightlight search text jquery

Tiny, fast jQuery plugin to search text through elements as you type. This plugin is created and maintained by Gurudath BN ( Github ).

Features :-

  1. Lightweight. This plugin is only ~3.8kB minified and gzipped!
  2. Fast. This plugin is optimized for fast, lagless searching even through large element sets.
  3. Search types. This plugin provides search text ! Fuzzy matching, case insensitive also.
  4. Custom show/hide. You can define custom functions for showing and hiding the elements while searching.
  5. Provide a icon on hover textfield appear to search text , so it wont occupy space on page.
  6. Search anything. This plugin isn’t restricted to use on tables, any set of elements that has ‘rows’ with ‘columns’ inside them can be used.

Demo :-

Click here to view a demo of this plugin in action

https://jsfiddle.net/gurudath/k197zu3a/7/

Getting started :-

Basic usage  :-
U can know the basic workflow using the github url:-  https://github.com/gurudath/Gsearch

Git Path :- https://github.com/gurudath/Gsearch.git

Example usage :-

This example uses the configurations shown above to customize the plugin:

$(document).ready(function () {

       $(‘#update_stiky_search’).GSearch({

            update_at: ‘update_stiky_search’,

            margin_top: ‘100px’,

            background_color: ‘#01A9DB’,

            highlight_class: ‘highlight’,

            content_main: $(‘.main-content’)

        });

});

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s