Render images in autocomplete list of ASPNet AJAX AutoCompleteExtender

In this article I will explain with an example, how to display images in the AutoComplete List in ASP.Net AJAX Control Toolkit AutoCompleteExtender control in ASP.Net using C# and VB.Net.

Database

Here I am making use of Microsoft’s Northwind Database. You can download it from here.

Download and install Northwind Database

Installing ASP.Net AJAX Control Toolkit

First, you have to download and install the AJAX Control Toolkit DLL.

Note: For more details, please refer my article Install AJAX Control Toolkit in Visual Studio ToolBox.

Registering ASP.Net AJAX Control Toolkit

In order to use ASP.Net AJAX Control Toolkit controls, you will need to add reference of AJAX Control Toolkit Library and then register on the Page as shown below.

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

HTML Markup

The following HTML markup consists of:

ScriptManager – For enabling Ajax.

TextBox – For user Input.

AutoCompleteExtender – For displaying autosuggestion list.

The AJAX Control Toolkit AutoCompleteExtender has the following properties:

ServiceMethod – The web service method to be called.

MinimumPrefixLength – Minimum number of characters to be entered.

CompletionInterval – Time to get suggestions. Here it is set in milliseconds. The default value is 1000.

CompletionSetCount – Number of suggestions to be displayed.

EnableCaching – Whether client side caching is enabled or not.

TargetControlID – The Id of the TextBox control.

FirstRowSelected – Determines if the first option in the AutoComplete list will be selected by default.

OnClientPopulated – For triggering JavaScript function, when items are populating in the AutoComplete list.

OnClientItemSelected – For triggering JavaScript function, when user selects an item from the AutoComplete list.

<asp:ScriptManager runat="server" EnablePageMethods="true"></asp:ScriptManager>

<asp:TextBox ID="txtEmployeeSearch" runat="server"></asp:TextBox>

<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" ServiceMethod="SearchEmployees"

MinimumPrefixLength="1" CompletionInterval="100" EnableCaching="false" CompletionSetCount="10"

TargetControlID="txtEmployeeSearch" OnClientPopulated="OnEmployeesPopulated"

OnClientItemSelected="OnEmployeeSelected" FirstRowSelected="false">

</cc1:AutoCompleteExtender>

Namespaces

You will need to import the following namespaces.

using System.Data.SqlClient;

using System.Configuration;

using System.Web.Services;

VB.Net

Imports System.Data.SqlClient

Imports System.Configuration

Imports System.Web.Services

Server Side Method

The following Web Method is used to populate the records from the Employees Table of the Northwind database.

This method accepts following parameters:

1. prefixText (string)

2. count (int)

Note: It is very important that you keep the signature of the method i.e. the name of the parameters are same as given, otherwise the method won’t work with AutoCompleteExtender.

The value of the FirstName and LastName fields along with the EmployeeId are inserted into a Generic List collection of string using the AutoCompleteExtender Item of ASP.Net AJAX Control Toolkit and then returned to the ASP.Net AJAX AutoCompleteExtender Control.

The EmployeeId will be used for displaying image of Employees at Client Side, while FirstName and LastName fields will be used to display the Name of the Employees in AutoCompleteList.

[WebMethod]

public static List<string> SearchEmployees(string prefixText, int count)

{

string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;

using (SqlConnection con = new SqlConnection(conString))

{

string query = "SELECT EmployeeId, FirstName, LastName FROM Employees WHERE FirstName LIKE @SearchText + '%'";

using (SqlCommand cmd = new SqlCommand(query, con))

{

cmd.Parameters.AddWithValue("@SearchText", prefixText);

con.Open();

List<string> employees = new List<string>();

using (SqlDataReader sdr = cmd.ExecuteReader())

{

while (sdr.Read())

{

employees.Add(AjaxControlToolkit.AutoCompleteExtender

.CreateAutoCompleteItem(string.Format("{0} {1}", sdr["FirstName"], sdr["LastName"]), sdr["EmployeeId"].ToString()));

}

con.Close();

return employees;

}

VB.Net

Public Shared Function SearchEmployees(prefixText As String, count As Integer) As List(Of String)

Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString

Using con As SqlConnection = New SqlConnection(conString)

Dim query As String = "SELECT EmployeeId, FirstName, LastName FROM Employees WHERE FirstName LIKE @SearchText + '%'"

Using cmd As SqlCommand = New SqlCommand(query, con)

cmd.Parameters.AddWithValue("@SearchText", prefixText)

con.Open()

Dim employees As List(Of String) = New List(Of String)()

Using sdr As SqlDataReader = cmd.ExecuteReader()

While sdr.Read()

employees.Add(AjaxControlToolkit.AutoCompleteExtender _

.CreateAutoCompleteItem(String.Format("{0} {1}", sdr("FirstName"), sdr("LastName")), sdr("EmployeeId").ToString()))

End While

End Using

con.Close()

Return employees

End Using

End Function

Client Side Methods

Following JavaScript functions are used to display the Image and the Name of the Employees in the AutoCompleteList of ASP.Net AJAX Control Toolkit AutoCompleteExtender.

OnEmployeesPopulated

The OnEmployeesPopulated JavaScript function gets called, when the AutoCompleteList is populated. This method embeds the images into the AutoComplete item.

Inside the OnEmployeesPopulated function, a loop will be executed over the AutoComplete list items and an HTML DIV is created.

Then, EmployeeId is fetched from value property and a dynamic Image control is created and set in the HTML DIV.

Finally, the HTML DIV is appended to the AutoCompleteList.

OnEmployeeSelected

The OnEmployeeSelected JavaScript function gets called, when an item from the AutoCompleteList is selected and it returns the text and value of the selected AutoComplete Item.

When an item from the AutoCompleteList is selected, the text i.e. the Employee name is set in the source control i.e. TextBox.

function OnEmployeesPopulated(sender, e) {

var employees = sender.get_completionList().childNodes;

for (var i = 0; i < employees.length; i++) {

var div = document.createElement("DIV");

div.innerHTML = "<img style='height:50px;width:50px' src='photos/" + employees[i]._value + ".jpg' /><br />";

employees[i].appendChild(div);

}

};

function OnEmployeeSelected(source, eventArgs) {

var idx = source._selectIndex;

var employees = source.get_completionList().childNodes;