Auto Complete Example ASP.NET AjaxToolkit C#

Auto complete is one powerful feature in modern web application. It is helping people to get the suggestion what are the word to put in the textbox.

Today i want to show example how to use AutoComplete feature in AjaxToolkit Asp.Net

The List of requirement :

• AjaxToolkit library
• AutoCompleteTextBox.aspx Page
• DataAutoComplete.asmx Web services

The AutoCompleteTextBox.aspx Page :

 <%--Script Manager--%>
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <%--The Textbox--%>
    <asp:TextBox ID="TextBox1" runat="server" Width="259px"></asp:TextBox>
    <%--Auto Complete Textbox Extender Controller--%>
    <asp:AutoCompleteExtender ID="autoComplete1" runat="server" EnableCaching="true"
        BehaviorID="Auto" MinimumPrefixLength="2" TargetControlID="TextBox1"
        ServicePath="DataAutoComplete.asmx" ServiceMethod="GetCompletionList" CompletionInterval="500"
        CompletionSetCount="20" DelimiterCharacters=";, :" ShowOnlyCurrentWordInCompletionListItem="true">
        <Animations>
          <OnShow>
              <Sequence>  
              <OpacityAction Opacity="0" />
              <HideAction Visible="true" />
             <ScriptAction Script="var behavior = $find('Auto');
                                    if (!behavior._height) {
                                      var target = behavior.get_completionList();
                                      behavior._height = target.offsetHeight - 2;
                                      target.style.height = '0px';
                                    }" />
  
              <Parallel Duration=".4">
              <FadeIn />
              <Length PropertyKey="height" StartValue="0" 
                EndValueScript="$find('Auto')._height" />
              </Parallel>
              </Sequence>
        </OnShow>
        <OnHide>  
          <Parallel Duration=".4">
          <FadeOut />
          <Length PropertyKey="height" StartValueScript=
            "$find('Auto')._height" EndValue="0" />
          </Parallel>
        </OnHide>
      </Animations>
    </asp:AutoCompleteExtender>

The DataAutoComplete.asmx Web Services

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Services;
using System.Data;

namespace BlogExample
{
    /// <summary>
    /// Summary description for DataAutoComplete1
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // 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 DataAutoComplete : System.Web.Services.WebService
    {
        [WebMethod]
        public string[] GetCompletionList(string prefixText, int count)
        {
            DataTable table = new DataTable();
            table.Columns.Add("CompanyName", typeof(string));
            table.Columns.Add("ID", typeof(string));           
            
            DataRow row = table.NewRow();
            row["CompanyName"] = "malaysia";
            row["ID"] = "1";
            table.Rows.Add(row);

            row = table.NewRow();
            row["CompanyName"] = "madinah";
            row["ID"] = "2";
            table.Rows.Add(row);

            row = table.NewRow();
            row["CompanyName"] = "mecca";
            row["ID"] = "3";
            table.Rows.Add(row);

            row = table.NewRow();
            row["CompanyName"] = "syiria";
            row["ID"] = "4";
            table.Rows.Add(row);

            row = table.NewRow();
            row["CompanyName"] = "mesir";
            row["ID"] = "5";
            table.Rows.Add(row);

            row = table.NewRow();
            row["CompanyName"] = "saudi arabia";
            row["ID"] = "6";
            table.Rows.Add(row);

            DataRow[] collectionRows = null;
            try{ collectionRows = table.Select("CompanyName like '%" + prefixText.Trim().ToLower() + "%'"); }
            catch (Exception ex){  /* exception handler */   }

            //Then return List of string(txtItems) as result
            List<string> txtItems = new List<string>();
            string dbValues = null;
            foreach (DataRow _row in collectionRows)
            {                
                dbValues = _row["CompanyName"].ToString();
                dbValues = dbValues.ToLower();
                txtItems.Add(dbValues);
            }

            return txtItems.ToArray();

        }
    }
}

The Output

NOTE : You can change the code to select data in database or cache table to optimize the performance. Have a try


By Mohd Zulkamal
NOTE : – If You have Found this post Helpful, I will appreciate if you can Share it on Facebook, Twitter and Other Social Media Sites. Thanks =)