No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
js
README.md
demo.html

README.md

Jquery Keyword Highlight Plugin

The Jquery Keyword Highlight Plugin is a simple Jquery Plugin that allows you to highlight a keyword in the contents of a targeted DOM element. Useful to supplement dynamic search results that resulted from a keyword search, or for simply highlighting keywords in a simple and fast way.

Requirements

  • JQuery must be loaded.

Usage

Add the plugin to your <head> tag or before the closing <body> tag:

<script type="text/javascript" src="/js/jquery-keyword-highlight.js"></script>

Add a custom CSS class to the content that you want searched and highlighted:

<div class="highlight-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

Initialize and bind to the CSS class you used above on page ready, if you are not using inline data attributes, you must initialize with at least the keyword to search for:

$(document).ready(function() { 
  $(".highlight-content").keywordHighlight({
      keyword: 'ipsum'
  });
});

Configuring

There are two additional optional configurable options on initialization in addition to the required keyword :

$(".highlight-content").keywordHighlight({
    keyword: 'keyword',
    caseSensitive: 'false',  
    highlightClass: 'highlight'
});
  • keyword :: the keyword you are searching and highlighting. This is required.
  • caseSensitive :: indicates if keyword search should be case sensitive, default = false
  • highlightClass :: the class of the span tag that will surround the found keyword, default = "highlight"

Inline Data Attributes

The following data attributes may be used inline and will override any initialized or default settings for that instance of the targeted content:

  • data-keyword :: overrides the keyword setting
  • data-caseSensitive :: overrides the case sensitivity setting
  • data-highlightClass :: overrides the highlightClass setting

Example:

<div class="highlight-content" data-keyword="lorem" data-caseSensitive="false" data-highlightClass="highlight-circle" >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

With the above inline data attributes, you can simply initialize the keyword highlight plugin like:

$('.highlight-content').keywordHighlight();
The above inline attributes will then allow the keyword highlight to search for the word "lorem" without case sensitivity and give it a highlight class of "highlight-circle".

Here are some sample styles you can use (place in your <head>or your css style sheet):


<style>
.highlight
{
    background-color:#FFFF66;
    color:#333;
    padding:2px;
}

.highlight-circle { border:solid 1px #eee; border-radius:3px; padding:2px; background-color:#eee; color:#333; font-weight:600; } </style>

Some Limitations

The plugin only finds whole words only and can not search through portions of words.  This includes things such as words surrounded by quotations or ending with a period for example.   1. this word will be found  2. this word will not be found. -- if you search for the keyword "found",  the word "found" will be found.  In the second sentence, because of the added period, the word "found" will not be found.

That's it! See example here for usage.