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.
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
Browser Compatibility
The above code has been tested in the following browsers.
* 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