Predictive Search Control

• Download Source

Introduction

Predictive Search Control is a custom control that works similar to Google Current Search. As we all know, Search is one of the most important functionalities in any application. Here Search is Predictive since the search results are displayed as and when a charcter is being typed. The results are displayed that matches with the charaters entered in the search. This uses extensively JavaScript to perform the search.

Create Predictive Search Control

Add a Class Library Project and also add a class that inherits from CompositeControl Composite Control consists of more than one ASP.NET Server control that enables the user to extend functionlity. For more information on comp:

   public class PredictiveSearchControl :CompositeControl
   {
        private TextBox txtSearch = new TextBox();
        private ListBox lstBox = new ListBox();

   public object> DataSource
   {
         get
        {
            return lstBox.DataSource;
            }
        set
       {
            lstBox.DataSource = value;
        }
    }

   public bool IgnoreCaseSensitive{ get;  set; }

   public string DisplayMember
   {
        get
       {
            return lstBox.DataTextField;
        }
        set
       {
            lstBox.DataTextField = value;
        }
    }

   public string ValueMember
   {
        get
       {
            return lstBox.DataValueField;
        }
        set
       {
            lstBox.DataValueField = value;
        }
    }

    public override  Unit  Width{ get; set ; }

    public override void RenderControl(HtmlTextWriter writer)
   {
        writer.RenderBeginTag(HtmlTextWriterTag.Table);
        writer.RenderBeginTag(HtmlTextWriterTag.Tr);
        writer.RenderBeginTag(HtmlTextWriterTag.Td);
        txtSearch.RenderControl(writer);
        writer.RenderEndTag();    // td
        writer.RenderEndTag();    // tr
        writer.RenderBeginTag(HtmlTextWriterTag.Tr);
        writer.RenderBeginTag(HtmlTextWriterTag.Td);
        lstBox.RenderControl(writer);
        writer.RenderEndTag();    // td
        writer.RenderEndTag();    // tr
        writer.RenderBeginTag(HtmlTextWriterTag.Tr);
        writer.RenderBeginTag(HtmlTextWriterTag.Td);
        writer.RenderEndTag();    // td
        writer.RenderEndTag();    // tr
        writer.RenderEndTag();    // table
    }

   public override ControlCollection Controls
   {
        get
       {
            EnsureChildControls();
            return base.Controls;
        }
    }

    protected override void CreateChildControls()
   {
        Controls.Clear();
        txtSearch.Width = this.Width;
        Controls.Add(txtSearch);
        lstBox.Width = this.Width;
        lstBox.DataBind();
        Controls.Add(lstBox);
        //The description for these Javascript functions
        //have been explained in the
        lstBox.Attributes.Add("onchange", "Javascript:setTextOnChange()");
        lstBox.Attributes.Add("ondblclick",
            "Javascript:SetVisibility('false')");
        lstBox.Attributes.Add("onclick", "Javascript:SetVisibility('false')");
        txtSearch.Focus();
        txtSearch.Attributes.Add("onkeyup",
            "Javascript:Test('" + lstBox.ClientID + "','" +
            txtSearch.ClientID + "','" + this.IgnoreCaseSensitive + "') ");
        txtSearch.Attributes.Add("onfocus", "Javascript:Focus('" +
            lstBox.ClientID + "')");
    }

    protected override void OnPreRender(EventArgs e)
   {
        base.OnPreRender(e);
        this.Page.ClientScript.RegisterClientScriptInclude(
            "PredictiveSearch", this.Page.ClientScript.GetWebResourceUrl(
            typeof(PredictiveSearchControl),
            "PredictiveSearchControl.PredictiveSearch.js"));
    }
}

Test Web Page: Using the Control

Create a Test Web Site that uses the control created above. The following is the HTMLCode for the control. As can be seen below, ignorecasesensitive can be configured. Setting it to TRUE will display all the entries matching the text entered ignoring the case. Setting it to FALSE will display only those entries matching the text considering the case.

<cc:predictivesearchcontrol runat"=server"
width"=170" displaymember"=EmpLastName"
valuemember"=EmpId"  id "=testPredicateSearch"
ignorecasesensitive="=false"/>

In the Page_Load() event of the test page, assign the datasource to the control

Pros and Cons

Pros

• Very fast search
• Can be used in application that has the static data for long time
• Very easy to use for the developer
• Search can be configured as per the user requirement

Cons

• Cannot be used in applications where the data varies frequently