In this article I am explaining how to use jQuery Plugin to create an autocomplete with images or icons.
Thus plugin makes use of the existing jQuery Autocomplete Plugin and the additional Image Autocomplete plugin converts the normal jQuery plugin to the one with images. So let’s start on it.
Note: Though I am describing this application via ASP.Net but you can use this plugin with any language PHP, JSP, ASP, etc.

HTML Mark-up
Below is the HTML Mark-up of the page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link href="css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery.autocomplete.js" type="text/javascript"></script>
<script src="scripts/ImageAutoComplete.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#<%=txtSearch.ClientID%>").ImageAutocomplete('<%=ResolveUrl("~/Search_CS.ashx")%>');
});
</script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick = "Submit" />
    </form>
</body>
</html>
As you will notice I have a textbox to which I am converting to an AutoComplete textbox using the ImageAutocomplete plugin. Also Search_CS.ashx is the handler that will send the data to the autocomplete when requested. For VB.Net users the handler will be Search_VB.ashx.

Implementing the Handler
Server side the handlers simply accept the request, fire the query on database and return the fetched data to the Autocomplete.
Note: I am using Employees table from the Microsoft Northwind sample database. You can download it here Download Northwind Database
In the handler I format the autocomplete item so that I can include the image along with its path. In this case I have stored the images in the format {EmployeeId}.jpg
C#
<%@ WebHandler Language="C#" Class="Search_CS" %>
 
using System;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;
using System.Text;
 
public class Search_CS : IHttpHandler {
    public void ProcessRequest (HttpContext context) {
        string prefixText = context.Request.QueryString["q"];
        string photosPath = "photos/";
        using (SqlConnection conn = new SqlConnection())
        {
            conn.ConnectionString = ConfigurationManager
                    .ConnectionStrings["constr"].ConnectionString;
            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;
                StringBuilder sb = new StringBuilder();
                conn.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        sb.Append(string.Format("{0} {1}-{2}{3}.jpg{4}",
                          sdr["FirstName"], sdr["LastName"], photosPath, sdr["EmployeeId"],
                            Environment.NewLine));
                    }
                }
                conn.Close();
                context.Response.Write(sb.ToString());
            }
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
}
 
VB.Net
<%@ WebHandler Language="VB" Class="Search_VB" %>
 
Imports System
Imports System.Web
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Text
 
Public Class Search_VB : Implements IHttpHandler
    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        Dim prefixText As String = context.Request.QueryString("q")
        Dim photosPath As String = "photos/"
        Dim conn As SqlConnection = New SqlConnection
        conn.ConnectionString = ConfigurationManager _
            .ConnectionStrings("constr").ConnectionString
        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 sb As StringBuilder = New StringBuilder
        conn.Open()
        Dim sdr As SqlDataReader = cmd.ExecuteReader
       
        While sdr.Read
            sb.Append(String.Format("{0} {1}-{2}{3}.jpg{4}", sdr("FirstName"), _
                    sdr("LastName"), photosPath, sdr("EmployeeId"), Environment.NewLine))
        End While
        conn.Close()
        context.Response.Write(sb.ToString)
    End Sub
 
    Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property
 
End Class
Fetch the value Server Side
You can fetch the value server side in the following way
C#
protected void Submit(object sender, EventArgs e)
{
    string name = Request.Form[txtSearch.UniqueID];
}
VB.Net
Protected Sub Submit(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click
     Dim name As String = Request.Form(txtSearch.UniqueID)
End Sub
 
Screenshot
The below screenshot displays the working of the jQuery image autocomplete plugin

Autocomplete with images jQuery plugin - Autocomplete list with images

Autocomplete with images jQuery plugin - Autocomplete selected item with image
Browser Compatibility

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.

 
 
Downloads
You can download the complete source code in C# and VB.Net along with the plugin using the download link provided below
Download Code
The plugin is also submitted on the jQuery site. You can refer the below link
http://plugins.jquery.com/project/ImageAutoCompletePlugin