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 :

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
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 =)

Popular posts from this blog

Example to disable save as certain file type in SSRS Report Viewer

-
Image
SQL Server Reporting Service(SSRS) is a full range of ready-to-use tools and services to help you create, deploy, and manage reports for your organization, as well as programming features that enable you to extend and customize your reporting functionality. The Report Viewer provide functionality to save the report as a pdf, word and also as a excel format. Sometime organization require this feature, sometime not. This is how to disable save as function in Report Viewer(SSRS). The example will invoke methode pre-render in Report Viewer Controller. The ASPX Page <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> <%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=10.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"     Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %> : : : <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat...
Read more

How to create DataGrid or GridView in JSP - Servlet

-
Image
Hi there, today I will like to share my knowledge on creating basic Datagrid in JSP. This is my solution but not a permanent solution in all other cases. Maybe you can enhance this code to achieve your own objective. In this tutorial, I will use basic servlet and JSP. Note: In this tutorial, I will use this library:- MySQL JDBC Driver JSTL 1.1 the project will run on source JDK 7 This is the database table DROP TABLE IF EXISTS `blogtest`.`usersprofile`; CREATE TABLE  `blogtest`.`usersprofile` (   `userid` varchar(30) NOT NULL,   `firstName` varchar(45) NOT NULL,   `lastName` varchar(45) NOT NULL,   `emailAddress` varchar(45) NOT NULL,   PRIMARY KEY (`userid`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1; INSERT INTO `usersprofile` VALUES ('Ahmad','Ahmad','Ahmad','Ahmad@gmail.com'), ('Ahmad1','Ahmad1','Ahmad1','Ahmad1@gmail.com'), ('Ahmad10','Ahmad10','Ahmad10','Ahmad10@gmail.com'), ('Ahmad11...
Read more

Control Webpart Visible/Enable using macro in Kentico

-
Image
Simple post just to show how you can enable or visible the webpart in certain page. This is basically to avoid using many template. You can use only one template that have many webpart, and you can control visible/enable it using macro. Macro Code {% if(NodeAlias == "Search") {    return true; } else {  return false; } %} 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 =)
Read more