Autocomplete Textbox

Autocomplete Textbox

Here we will learn how to auto suggest value for textbox while we typing a text in textbox.

To accomplish this task we need to write web service... 

The sample code is written to auto suggest subjects.

Here I'm writting Web service:

after adding web service file only contains following one line code

<%@ WebService Language="C#" CodeBehind="~/App_Code/AutoEmployerService.cs" Class="AutoEmployerService" %>

and 

code file goes to App_Code folder.....

write following code in file which reside in App_Code folder

using System;
using System.Collections.Generic;
using System.Collections;
using System.Data;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml;
using System.Web.Script.Services;

//add namespace of your business class

/// <summary>
/// Summary description for AutoEmployerService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
 [System.Web.Script.Services.ScriptService()]

public class AutoEmployerService : System.Web.Services.WebService
{
    Common objCommon = new Common();
    RegistrationBL objRegistrationBL = new RegistrationBL();

    public AutoEmployerService()
    {

        //Uncomment the following line if using designed components
        //InitializeComponent();
    }
    [System.Web.Script.Services.ScriptMethod]
    [WebMethod]
    public string[] GetSubjectList(string prefixText)
    {
        //Then return List of string(txtItems) as result
        List<string> txtSubject = new List<string>();
        try
        {
            DataSet ds = new DataSet();

            ds = objRegistrationBL.GetSubjectList(prefixText);

            DataTable dt = ds.Tables[0];
           
            String dbValues;

            foreach (DataRow row in dt.Rows)
            {
                //String From DataBase(dbValues)
                dbValues = row["Subject"].ToString();
                dbValues = dbValues.ToLower();
                txtSubject.Add(dbValues);
            }
         }
        catch (Exception ex)
        {
            objCommon.LogException(ex.Message);
        }
        return txtSubject.ToArray();
    }  
}

On your web form design form add reference of Ajax control toolkit.

& take scriptmanager.... at page top

Design:

<asp:ScriptManager ID="ScriptManager2" runat="server" EnablePageMethods="true">
        <Services>
            <asp:ServiceReference Path="~/Registration/AutoEmployerService.asmx" />
        </Services>

</asp:ScriptManager>

<asp:TextBox ID="txtEmployer" runat="server" CssClass="textBoxStyle" Width="33%"></asp:TextBox>
                                <ajaxToolkit:AutoCompleteExtender runat="server" ID="autoComplete1" BehaviorID="AutoCompleteEx11"
                                    TargetControlID="txtEmployer" ServicePath="AutoEmployerService.asmx" ServiceMethod="GetEmployerAtList"
                                    MinimumPrefixLength="1" CompletionInterval="10" EnableCaching="true" CompletionSetCount="10"
                                    CompletionListCssClass="autocomplete_completionListElement" CompletionListItemCssClass="autocomplete_listItem"
                                    CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem" DelimiterCharacters=";, :">
                                    <%--ShowOnlyCurrentWordInCompletionListItem="true" >--%>
                                    <Animations>
                            <OnShow>
                                <Sequence>
                                    <%-- Make the completion list transparent and then show it --%>
                                    <OpacityAction Opacity="0" />
                                    <HideAction Visible="true" />
                                   
                                    <%--Cache the original size of the completion list the first time
                                        the animation is played and then set it to zero --%>
                                    <ScriptAction Script="
                                        // Cache the size and setup the initial size
                                        var behavior = $find('AutoCompleteEx11');
                                        if (!behavior._height) {
                                            var target = behavior.get_completionList();
                                            behavior._height = target.offsetHeight - 2;
                                            target.style.height = '0px';
                                        }" />
                                   
                                    <%-- Expand from 0px to the appropriate size while fading in --%>
                                    <Parallel Duration=".4">
                                        <FadeIn />
                                        <Length PropertyKey="height" StartValue="0" EndValueScript="$find('AutoCompleteEx11')._height" />
                                    </Parallel>
                                </Sequence>
                            </OnShow>
                            <OnHide>
                                <%-- Collapse down to 0px and fade out --%>
                                <Parallel Duration=".4">
                                    <FadeOut />
                                    <Length PropertyKey="height" StartValueScript="$find('AutoCompleteEx11')._height" EndValue="0" />
                                </Parallel>
                            </OnHide>
                                    </Animations>
                                </ajaxToolkit:AutoCompleteExtender>

By this you can achieve this....

Hope this article helps you........

Thanks....