Hi Waghmare,

To display autocomplete with Binary images you need to use Generic HTTP Handler and call the Handler on OnClientPopulated event of AutoCompleteExtender.

The Generic Handler will accept the ID through the QueryString parameter and fetches the Binary Data of the Image file from the database using its ID.

Finally the Binary Data is converted into a Byte Array and returned through the response and displayed in the AutoComplete result.

For this refer below articles.

Render images in autocomplete list of ASP.Net AJAX AutoCompleteExtender

Using Generic Handler to display Binary Image from database in ASP.Net

Here you need to change the below

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

With the below.

div.innerHTML = "<img style = 'height:50px;width:50px' src = 'Handler.ashx?id=" + images[i]._value + "' /><br />";

Handler.ashx

C#

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;

public class Handler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        int id = 0;
        int.TryParse(context.Request.QueryString["id"], out id);
        if (id > 0)
        {
            string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
            using (SqlConnection con = new SqlConnection(constr))
            {
                string sql = "SELECT Data,ContentType FROM tblFiles WHERE Id = " + id + " AND ContentType = 'image/jpeg'";
                using (SqlDataAdapter sda = new SqlDataAdapter(sql, con))
                {
                    DataTable dt = new DataTable();
                    sda.Fill(dt);
                    byte[] bytes = (byte[])dt.Rows[0]["Data"];
                    context.Response.ContentType = dt.Rows[0]["ContentType"].ToString();
                    context.Response.BinaryWrite(bytes);
                    context.Response.End();
                }
            }
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

VB.Net

<%@ WebHandler Language="VB" Class="Handler" %>

Imports System
Imports System.Web
Imports System.Data.SqlClient
Imports System.Data

Public Class Handler : Implements IHttpHandler
    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        Dim id As Integer = 0
        Integer.TryParse(context.Request.QueryString("id"), id)
        If (id > 0) Then
            Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
            Dim con As SqlConnection = New SqlConnection(constr)
            Dim sql As String = "SELECT Data,ContentType FROM tblFiles WHERE Id = " & id & " AND ContentType = 'image/jpeg'"
            Dim sda As SqlDataAdapter = New SqlDataAdapter(sql, con)
            Dim dt As DataTable = New DataTable
            sda.Fill(dt)
            Dim bytes() As Byte = CType(dt.Rows(0)("Data"), Byte())
            context.Response.ContentType = dt.Rows(0)("ContentType").ToString
            context.Response.BinaryWrite(bytes)
            context.Response.End()
        End If
    End Sub
 
    Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property
End Class