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:
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
Summary
Code samples are attached with SQL scripts and respective files. Test the code and please post your comments.