Ajax Auto Complete suggestion in asp.net using webservices (Ajax AutocompleteExtender)

/ / 1 Comments
AutoCompelete using Ajax in Asp.net  Ajax is a powerful script on the web, It provides you a lot more functionality to improve your application performance. Here's the article to show how to work with AutoCompleteExtender (Control in AjaxControlToolKIt).

AutoComplete Description  

  • AutoComplete is an ASP.NET AJAX extender that can be attached to any TextBox control, and will associate that control with a popup panel to display words that begin with the prefix typed into the textbox.
  • The dropdown with candidate words supplied by a web service is positioned on the bottom left of the text box.
This means that the control will fetch the data from a Webservice(ASMX), and it can be attached to any Asp.net TextBox control. Whenever users start typing in the textbox, it automatically fetches a suggestion list from the configured Webservice.

Note: Add the latest Ajax DLL in your application bin folder.

Step 1: Add  Webservices (WebService.asmx)

C# Code:  appcode/WebService.cs

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

/// Summary description for WebService
[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 WebService : System.Web.Services.WebService {

public WebService () {
 //Uncomment the following line if using designed components
 //InitializeComponent();
}

[WebMethod]
public string[] GetNames(string prefixText, int count, string contextKey)
{
 ArrayList sampleList = new ArrayList();
 sampleList.Add("ABC"); sampleList.Add("Hello");
 sampleList.Add("Hi"); sampleList.Add("Apple");
 sampleList.Add("Hey");
 ArrayList filteredList = new ArrayList();
 foreach (string s in sampleList){
  if (s.ToLower().StartsWith(prefixText.ToLower()))
   filteredList.Add(s);
 }
 return (string[])filteredList.ToArray(typeof(string));
 }
}


Step 2: AC.aspx page:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ac.aspx.cs" Inherits="Ac" %>
<%@  Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="Ajaxtoolkit"  %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"></head> <body> <form id="form1" runat="server"> <asp:scriptmanager id="ScriptManager1" runat="server"></asp:scriptmanager> <div> <asp:textbox id="TextBox1" runat="server"></asp:textbox> <ajaxtoolkit:autocompleteextender enabled="true" minimumprefixlength="0" runat="server" servicemethod="GetNames" servicepath="WebService.asmx" targetcontrolid="TextBox1" usecontextkey="true"> </ajaxtoolkit:autocompleteextender> </div> </form> </body> </html>

Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.

PS: If you found this content valuable and want to thank me? 👳 Buy Me a Coffee

Subscribe to our newsletter

Get the latest and greatest from Codepedia delivered straight to your inbox.


Post Comment

Your email address will not be published. Required fields are marked *

1 Comments

  1. SMTP Relay 06/08/2012 07:47:57
    Hello,

    This is really interesting take on the concept. I never thought of it that way. I came across this site recently which I think it will be a great use of new ideas and informations. Thanks a lot...