AJAX AutoCompleteExtender - DropDownList-Like Behavior

Suthish Nair
13y
37k
0
1

Article

An Ajax AutoCompleteExtender example having DropDownList-like behavior. Also an example of applying css styles for list items and how to use some of the properties of the extender.

Introduction

An open-source project ASP.NET AJAX Control Toolkit comes with a useful control called AutoCompleteExtender. This control helps to extend like a DropDownList control behavior (provides a key/value mode) with auto-complete features. For more about the AutoCompleteExtender refer to the AutoComplete page. This articles shows how to get values from a database using a web service, how to apply css styles for list items, and how to use some of the properties and even how to show a loading image inside the extender.

Getting Started

Article uses: Visual Studio 2008, Northwind database and AjaxControlToolkit.dll, Version=3.5.

To download the AJAX Control Toolkit refer to the above link for the ASP.NET AJAX Control Toolkit.

List of pages and files used for this article:

Page 1. AutoCompleteExample.aspx

Page 2. AutoCompleteExample.aspx.cs

Page 3. GetCustomer.asmx

Page 4. GetCustomer.cs

File 1. style.css

File 2. loading.gif

The following image shows a sample AutoCompleteExtender Output.

Image 1:

On the right-end corner of the Textbox control you can see the loading image. Also, css styles are applied for list items.

The "Search" button helps to retrieve Customer details from the Database table depending on selection of a list item.

Image 2:

The Code

Page 1: ==>

Registering AjaxControlToolkit assembly:

   <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

The following controls are used:

cc1:toolkitscriptmanager --> ID = "ScriptManager1"
asp:TextBox --> ID = "txtAtComplete"
cc1:AutoCompleteExtender --> ID = "autoComplete1"
asp:hiddenfield --> ID = "hdnCustValue"
asp:Button --> ID = "btnShow"
asp:GridView --> ID = "GridView1"

Style sheet used: File 1

<link href="Styles/style.css" rel="stylesheet" type="text/css" />

JavaScript used:

   function LoadImage()

       Setting loading image (File 2) for Textbox control, called on OnClientPopulating extender property.

  function HideImage()

       Disabling loading image, called on OnClientPopulated extender property.

  function OnCustomerSelected(source, eventArgs)

       Used for retrieving the key/value from extender, called on OnClientItemSelected and later firing btnShow click event to

       fetch data from Database table.

How to get the value from the extender?

      document.getElementById('<%=hdnCustValue.ClientID%>').value = eventArgs.get_value();

Page 2: ==>

btnShow_Click

Fetching Customer details from Database table and showing on GridView.
Used Storeprocedure named FetchCustomerDetails.
If you don't want to show the button to the user then set style ="display: none;"

Page 3 & 4:

Web Service

[System.Web.Script.Services.ScriptService], allows Web Service to be called from script.
public List<string> CallDetails(string prefixText, int count), method used which returns the Item list.
Used Storeprocedure named FetchCustomerDetails.
AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem, used to bind text and value to List collection.

Page 5:

Style.css contains css for extender list items.

Image 1:

Why the output is showing one row starting with letter "S".

This is because of the SQL statement as follows (highlighted with red).

SELECT customerid, (customerid + ' - ' + companyname + ' - ' + city) custdetails

FROM dbo.customers

WHERE (UPPER(customerid) LIKE UPPER(@cust) + '%' OR

   companyname LIKE @cust + '%' OR

   city LIKE @cust + '%')

ORDER BY 1