How Create Custom Control Auto Suggest Box

Hi,
This document contains the technical details for component drop down list.
Requirement of component :-

Component: drop-down lists
Rules:
Typing the first letter of the word takes you immediately to the first word that

starts with that letter. Rapidly typing the first two letters takes you to the

first word that starts with those two letters.
Location of drop-down box arrows should be consistent relative to their fields

(e.g. always to the right of the field and never between the label and the

field), and arrows should have a consistent appearance throughout.

In part A we explained how to use the control and in Part B we explained how we

can created it


Before start code on application.
We have to add dll references . Second step is Add control toolbox.
Right click on tool Box -] choose items -] browse and locate custom

autoSuggestTextBox dll.
Drag control on page.


[%@ Register Assembly="autoSuggestTextBox" Namespace="autoSuggestTextBox"

TagPrefix="cc1" %]
[%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"

TagPrefix="ajaxToolkit" %]
This part contains the details how to use this control.

[form id="form1" runat="server"]
[asp:ScriptManager ID="ScriptManager1" runat="server"]
[Services]
[asp:ServiceReference Path="searchcusts.asmx" /]
[/Services]
[/asp:ScriptManager]
[div]
[asp:TextBox ID="txtFname" runat="server"][/asp:TextBox]
[br /]
[cc1:dropDownTextBox runat="server" TargetControlID="txtFname"

ServicePath="searchcusts.asmx"
ServiceMethod="GetCustList" MinimumPrefixLength="1"

EnableCaching="true"]
[/cc1:dropDownTextBox]
[/div]
[/form]

for this we must have create a webService which contained method for get data

from Table.

Sample code for webService is follows :-

using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;

using System.Collections.Specialized;


//--------

using System.Data;
using System.Data.SqlClient;
using System.Collections.Generic;


/// [summary]
/// This is sample webService for using drop down text box custom control.
/// [/summary]
[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]


[System.Web.Script.Services.ScriptService]///Add with signature

"System.Web.Script.Services.ScriptService"
public class SearchCusts : System.Web.Services.WebService {



/// [summary]
/// Returns a list of Fname.
/// [/summary]
/// [param name="prefixText"]sarting letters of fname[/param]
/// [param name="count"]Number of total suggestion which retruns to drop

down list[/param]
/// [returns]A string array of suggestions[/returns]


[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public string[] GetCustList(string prefixText, int count)
{
// string connString =

ConfigurationManager.ConnectionStrings["YourDB"].ToString();

string connString = @"Data Source=192.168.0.4\ver2005;Initial

Catalog=test_navdeep;User ID=navdeep;Password=navdeep";

string selectString = "SELECT DISTINCT TOP " + count.ToString() + " fname

from test1 WHERE fname LIKE '" + prefixText + "%'";

List[String] CustList = new List[string](count);
using (SqlConnection sqlConn = new SqlConnection(connString))
{
sqlConn.Open();

using (SqlCommand sqlCmd = new SqlCommand(selectString, sqlConn))
{
SqlDataReader reader = sqlCmd.ExecuteReader();
while (reader.Read())
CustList.Add(reader["fname"].ToString());
}
}
return (CustList.ToArray());
}

}


http://www.asp.net/AJAX/AjaxControlToolkit/Samples/AutoComplete/AutoComplete.aspx

Part B
For creating custom control we must add reference of ajaxcontroltoollkit.dll and

inherit our class with
AutoCompleteExtender class.Create its object and build solution. Thats create

our custom control. Simple code block for this as follows

using System;
using System.Collections.Generic;
using System.Text;
using AjaxControlToolkit;
using System.Web;

namespace autoSuggestTextBox
{
public class dropDownTextBox : AutoCompleteExtender
{
AutoCompleteExtender autoSuggestBox = new AutoCompleteExtender();

}
}

...
More property of custom control with description is follows :-



TargetControlID - The TextBox control where the user types content to be

automatically completed
ServiceMethod - The web service method to be called. The signature of this method

must match the following:
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public string[] GetCompletionList(string prefixText, int count) { ... }
Note that you can replace "GetCompletionList" with a name of your choice, but the

return type and parameter name and type must exactly match, including case.
ServicePath - The path to the web service that the extender will pull the

word\sentence completions from. If this is not provided, the service method

should be a page method.
ContextKey - User/page specific context provided to an optional overload of the

web method described by ServiceMethod/ServicePath. If the context key is used, it

should have the same signature with an additional parameter named contextKey of

type string:
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public string[] GetCompletionList(
string prefixText, int count, string contextKey) { ... }
Note that you can replace "GetCompletionList" with a name of your choice, but the

return type and parameter name and type must exactly match, including case.
UseContextKey - Whether or not the ContextKey property should be used. This will

be automatically enabled if the ContextKey property is ever set (on either the

client or the server). If the context key is used, it should have the same

signature with an additional parameter named contextKey of type string (as

described above).
MinimumPrefixLength - Minimum number of characters that must be entered before

getting suggestions from the web service.
CompletionInterval - Time in milliseconds when the timer will kick in to get

suggestions using the web service.
EnableCaching - Whether client side caching is enabled.
CompletionSetCount - Number of suggestions to be retrieved from the web service.
CompletionListCssClass - Css Class that will be used to style the completion list

flyout.
CompletionListItemCssClass - Css Class that will be used to style an item in the

AutoComplete list flyout.
CompletionListHighlightedItemCssClass - Css Class that will be used to style a

highlighted item in the AutoComplete list flyout.
DelimiterCharacters - Specifies one or more character(s) used to separate words.

The text in the AutoComplete textbox is tokenized using these characters and the

webservice completes the last token.
FirstRowSelected - Determines if the first option in the AutoComplete list will

be selected by default.
Animations - Generic animations for the AutoComplete extender. See the Using

Animations walkthrough and Animation Reference for more details.
OnShow - The OnShow animation will be played each time the AutoComplete

completion list is displayed. The completion list will be positioned correctly

but hidden. The animation can use [HideAction Visible="true" /] to display the

completion list along with any other visual effects.
OnHide - The OnHide animation will be played each time the AutoComplete

completion list is hidden.

Thanks and Regards
Mahesh K. Sharma