Demo
a demo page to test all the main configuration options of the plugin.
The idea
Highlighting the matched words on a search results page is not a new idea. It is not always obvious where the keywords are in the page, especially if the page is long with a complex structure. Often the page topic does not match the user’s intended search.
By highlighting the matched keywords, the user can quickly scan and find the relevant parts for his query.
How it works
It’s easy. The key is the unique SearchHighlight(options) function. With this and a few CSS classes to define the highlight you will be up and running in 5 minutes.
The CSS
<style type='text/css'>
span.hilite {background:yellow}
</style>The JS
<script src='SearchHighlight.js'></script>
<script type='text/javascript'>
var opzioni = {exact:"whole",style_name_suffix:false};
jQuery(function(){
jQuery(document).SearchHighlight(options);
});
</script>SearchHighlight detects the search engine you are coming from and extracts the keywords you are searching for from the URL. Then it finds those words in the page and adds your hilite class around them. Additionally, You can explicitly set the words to be searched, in which case the plugin will not make any test on the URL [1].
Configuration options
The plugin is completely configurable thanks to a number of options:
- exact (string, default value:"exact")
"exact" : finds and highlights the words exactly matching those searched
"whole" : finds partial matches of the words but wholly highlights them
"partial": finds and highlights partial matches of the words
- style_name (string, default value:"hilite")
The class of the span element that wraps the words to be highlighted.
- style_name_suffix (boolean, default value:true)
True indicates that each style will be incremented with a number. (hilite1, highlite2, hilite3...) This is useful to find specific matches and style them differently.
- debug_referrer(string, default value:null)
Manually sets a referrer for debug purposes.
- engines (array of regular expressions, default value:null)
Adds regular expressions to detect more search engines.
The first array item is the regular expression that matches the domain.
The second array item is the regular expression that matches the parameter containing the words to be searched for (query string)
Ex:[/^http:\/\/my\.site\.net/i,/search=([^&]+)/i]allows to detect the domain http://my.site.net as a search engine and extracts the words to be searched for from the search parameter.http://my.site.net?search=searched_words
- highlight (jQuery selector or object, default value:null)
Use this option to limit the Highlighting to a specific area of the page. Null is the entire document. If no elements are found the plugin consider the entire document as well.
- nohighlight (jQuery selector or object, default value:null)
Use this option to exclude the Highlighting from a specific area of the page. It has priority on the highlight option.
- keys (string, default value:null)
Allows to explicitly set the words to be searched for, while disabling all the tests against the referrer. Useful to disable search engines highlight and to highlight words extracted from page url or from the DOM.
RSS 2.0
Site Map
Private area