In this article I am explaining, how to display images in the AutoComplete List in ASP.Net AJAX Control toolkit AutoCompleteExtender Control in ASP.Net
For this tutorial I am making use of Employees table of Microsoft’s NorthWind database. You can download the NorthWind database using the link below
Download Northwind Database
Connection String
Below is the connection string to the database which I have placed in the web.config.
      <addname="constr"connectionString="Data Source = .\SQLExpress;       
       Initial Catalog = Northwind; Integrated Security = true"/>
AJAX Control Toolkit
Download the AJAX Control Toolkit DLL using the link below and add reference to your project.
Download AJAX Control Tookit
Once that’s done register it on the ASPX page as given below
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
HTML Markup
Below is the HTML markup of the ASP.Net Web Page
<asp:ScriptManager ID="ScriptManager1" runat="server"
EnablePageMethods = "true">
<asp:TextBox ID="txtContactsSearch" runat="server"></asp:TextBox>
<cc1:AutoCompleteExtender ServiceMethod="SearchEmployees"
    CompletionInterval="100" EnableCaching="false" CompletionSetCount="10"
    TargetControlID="txtContactsSearch" OnClientPopulated =    "Employees_Populated"
    OnClientItemSelected = " OnEmployeeSelected"
    ID="AutoCompleteExtender1" runat="server" FirstRowSelected = "false">
As you can notice above I have placed a ScriptManager, a TextBox that will act as AutoComplete and the ASP.Net AJAX Control Toolkit AutoCompleteExtender. Also I am calling a method SearchEmployees using the ServiceMethod property. I have also specified two client side events in order to display images which I’ll be explaining later.
Server Side Methods
The following method is used to populate the Auto complete list of employees
public static List<string> SearchEmployees(string prefixText, int count)
    using (SqlConnection conn = new SqlConnection())
        conn.ConnectionString = ConfigurationManager
        using (SqlCommand cmd = new SqlCommand())
            cmd.CommandText = "select EmployeeId, FirstName, LastName from" +
             " Employees where FirstName like @SearchText + '%'";
            cmd.Parameters.AddWithValue("@SearchText", prefixText);
            cmd.Connection = conn;
            List<string> employees = new List<string>();
            using (SqlDataReader sdr = cmd.ExecuteReader())
                while (sdr.Read())
                       .CreateAutoCompleteItem(string.Format("{0} {1}",
                       sdr["FirstName"], sdr["LastName"]),
            return employees;
<System.Web.Script.Services.ScriptMethod(), _
    System.Web.Services.WebMethod()> _
Public Shared Function SearchEmployees(ByVal prefixText As String, ByVal count As Integer) As List(Of String)
        Dim conn As SqlConnection = New SqlConnection
        conn.ConnectionString = ConfigurationManager _
        Dim cmd As SqlCommand = New SqlCommand
        cmd.CommandText = "select EmployeeId, FirstName, LastName from " & _
        " Employees where FirstName like @SearchText + '%'"
        cmd.Parameters.AddWithValue("@SearchText", prefixText)
        cmd.Connection = conn
        Dim employees As List(Of String) = New List(Of String)
        Dim 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
        Return employees
End Function

The above method simply searches the customers table and returns the list of employee’s names that matches the prefix text. I am also embedding the employee Id using the AutoCompleteExtender Item of ASP.Net AJAX Control Toolkit AutoCompleteExtender Control
This is later used Client Side for displaying images of Employees
For more information on using AJAX Control Toolkit AutoCompleteExtender Control in ASP.Net refer the following article
ASP.Net AJAX Control Toolkit AutoCompleteExtender without using Web Services
Client Side Methods
Below methods are used to embed images in the AutoCompleteList of ASP.Net AJAX Control Toolkit AutoCompleteExtender Control
<script type = "text/javascript">
function Employees_Populated(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 />";
function OnEmployeeSelected(source, eventArgs) {
    var idx = source._selectIndex;
    var employees = source.get_completionList().childNodes;
    var value = employees[idx]._value;
    var text = employees[idx].firstChild.nodeValue;
    source.get_element().value = text;
The Employees_Populated gets called when the AutoCompleteList is populated Client Side. This method embeds the images into the AutoComplete item.
The OnEmployeeSelected returns the text and value of the selected AutoComplete Item.
Below figure describes the working of AutoComplete Extender with images

ASP.Net AJAX  AutoCompleteExtender With Images in ASP.Net

The above code has been tested in the following browsers

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

You can download the related source code in VB.Net and C# using the link below.