searchTermsHighlight - automatically highlight search terms
Releases
| File / Release | Date Modified | Size | License | Link |
|---|---|---|---|---|
| searchTermsHighlight 1.1 | 04/05/2010 | 6.39 kB | MIT | Download |
| searchTermsHighlight 1.1 (packed) | 04/05/2010 | 2.88 kB | MIT | Download |
Resources
I've created a plugin that will highlight the search terms used to reach your page.
Usage
The plugin is dead simple to use. Simply select the element where your content is located, and call the plugin. See the example below.
$(document).ready(function() {
$('#content').searchTermsHighlight();
});You will also need to set up styles for the highlighted terms. See the example below.
span.term-0 {
background-color: #FAF6D1;
}
span.term-1 {
background-color: #EAFAD1;
}
span.term-2 {
background-color: #F7E2D4;
}Customisation
The plugin should be flexible enough to suit most needs. The following properties can be set by passing them in as the argument to the plugin.
displayText
The text that appears to inform the user that the terms have been highlighted. It supports two string placeholders, {SEARCH_ENGINE} and {SEARCH_TERMS}.
maxTerms
The maximum number of terms that will be highlighted.
textPlacement
This is a function that allows you to specify where the displayText will appear. It supports 2 arguments, contentArea and text.
debugTerms
Testing this plugin is difficult if you were to rely on visiting the site every time from a search engine results page. By passing an array of terms to debugTerms, you can see the plugin in effect.
Toggling the highlighting
You can toggle the highlighting on and off by using this code.
$('#content').searchTermsHighlight('toggle');Feedback
This plugin is very much in beta stage. Please provide feedback below using the comments form. Thanks!
Comments
No comments yet.
Leave a Comment
Note: Your comment may require approval before it is posted to the site.