Search Highlighter Extender for ASP.Net

7/17/2008

I'm adding another extender here because I've been creating a bunch of them lately. I'm even getting to the point where I might just package them all in a DLL and put it out that way. Anyway, this extender has two simple items you need to set, TargetControlID (which can be a div, table, etc.) and HighlightColor (Any CSS supported color format).  Once it has that information (and you've put the item on the page, of course). It will come up and if the user has arrived at the page using a search engine, it will highlight the words from the search in the color you specify.

SearchHighlighterExtender.cs

   1: using System;
   2: using System.Web.UI.WebControls;
   3: using System.Web.UI;
   4: using System.ComponentModel;
   5: using System.ComponentModel.Design;
   6: using AjaxControlToolkit;
   7:  
   8: [assembly: System.Web.UI.WebResource("AJAXControls.SearchHighlighter.SearchHighlighterBehavior.js", "text/javascript")]
   9:  
  10: namespace AJAXControls.SearchHighlighter
  11: {
  12:     [Designer(typeof(SearchHighlighterDesigner))]
  13:     [ClientScriptResource("AJAXControls.SearchHighlighter.SearchHighlighterBehavior", "AJAXControls.SearchHighlighter.SearchHighlighterBehavior.js")]
  14:     [TargetControlType(typeof(Control))]
  15:     public class SearchHighlighterExtender : ExtenderControlBase
  16:     {
  17:         // TODO: Add your property accessors here.
  18:         //
  19:         [ExtenderControlProperty]
  20:         [DefaultValue("")]
  21:         public string HighlightColor
  22:         {
  23:             get
  24:             {
  25:                 return GetPropertyValue("HighlightColor", "");
  26:             }
  27:             set
  28:             {
  29:                 SetPropertyValue("HighlightColor", value);
  30:             }
  31:         }
  32:     }
  33: }

SearchHighlighterBehavior.js

   1: // README
   2: //
   3: // There are two steps to adding a property:
   4: //
   5: // 1. Create a member variable to store your property
   6: // 2. Add the get_ and set_ accessors for your property
   7: //
   8: // Remember that both are case sensitive!
   9:  
  10:  
  11: /// <reference name="MicrosoftAjaxTimer.debug.js" />
  12: /// <reference name="MicrosoftAjaxWebForms.debug.js" />
  13: /// <reference name="AjaxControlToolkit.ExtenderBase.BaseScripts.js" assembly="AjaxControlToolkit" />
  14:  
  15:  
  16: Type.registerNamespace('AJAXControls.SearchHighlighter');
  17:  
  18: AJAXControls.SearchHighlighter.SearchHighlighterBehavior = function(element) {
  19:     AJAXControls.SearchHighlighter.SearchHighlighterBehavior.initializeBase(this, [element]);
  20:  
  21:     // TODO : (Step 1) Add your property variables here
  22:     this._HighlightColorValue = null;
  23: }
  24: AJAXControls.SearchHighlighter.SearchHighlighterBehavior.prototype = {
  25:     initialize: function() {
  26:         AJAXControls.SearchHighlighter.SearchHighlighterBehavior.callBaseMethod(this, 'initialize');
  27:  
  28:         // TODO: Add your initalization code here
  29:         Sys.UI.DomEvent.addHandler(window, 'load', Function.createDelegate(this, this._onload));
  30:     },
  31:  
  32:     _onload: function() {
  33:         if (window.location.search != "") {
  34:             var SearchString = this.GetSearchValue();
  35:             var BodyContainer = this.get_element();
  36:             var SearchTerms = SearchString.split('|');
  37:             for (var x = 0; x < SearchTerms.length; ++x) {
  38:                 var RegexValue = new RegExp();
  39:                 RegexValue.compile(">([^<]*)?(" + SearchTerms[x] + ")([^>]*)?<");
  40:                 this.HighlightText(BodyContainer, RegexValue, x);
  41:             }
  42:         }
  43:     },
  44:  
  45:     GetSearchValue: function() {
  46:         var SearchString = window.location.search.replace(/[a-zA-Z0-9\?\&\=\%\#]+s\=(\w+)(\&.*)?/, "$1");
  47:         SearchString = SearchString.replace(/\%20|\+/g, "\|");
  48:         return SearchString.replace("?", "");
  49:     },
  50:  
  51:     HighlightText: function(CurrentElement, RegexValue, Position) {
  52:         var TempHTML = CurrentElement.innerHTML;
  53:         CurrentElement.innerHTML = TempHTML.replace(RegexValue, '>$1<span style=\"background-color:' + this._HighlightColorValue + ';\"">$2</span>$3<');
  54:     },
  55:  
  56:     dispose: function() {
  57:         // TODO: Add your cleanup code here
  58:  
  59:         AJAXControls.SearchHighlighter.SearchHighlighterBehavior.callBaseMethod(this, 'dispose');
  60:     },
  61:  
  62:     // TODO: (Step 2) Add your property accessors here
  63:     get_HighlightColor: function() {
  64:         return this._HighlightColorValue;
  65:     },
  66:  
  67:     set_HighlightColor: function(value) {
  68:         this._HighlightColorValue = value;
  69:     }
  70: }
  71: AJAXControls.SearchHighlighter.SearchHighlighterBehavior.registerClass('AJAXControls.SearchHighlighter.SearchHighlighterBehavior', AjaxControlToolkit.BehaviorBase);

Now I'm not sure if it works with all search engines, etc. but seems to work with all the ones that I've tried (Google, etc.). But my regex skills are weak, so you might need to go in there and tweak it or modify the code for a particular search engine that I missed. However, barring those instances, just download the code, try it out, leave feedback, and happy coding.



Comments