Refer the below sample for your reference and implement it in your code as per your own logic.
Here in static Method we are checking file exist or not by IsFileExist static method by passing ImageName value also if file not present then assigning value as No Image to ImageName property.
Then in Ajax call we are checking the ImageName value which is assigned to image property. If value is No Image then it will set No Imge url else it will set the image which is exist in folder.
HTML
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="Stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/start/jquery-ui.css" />
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<style type="text/css">
.image
{
float: left;
max-height: 50px;
max-width: 50px;
margin-right: 10px;
}
.name
{
margin: 0;
padding: 0;
}
.username
{
display: block;
font-weight: bold;
margin-bottom: 1em;
}
.ui-autocomplete
{
max-height: 320px;
overflow: auto;
}
</style>
<script type="text/javascript">
$(function () {
$("[id*=txtSearch]").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/Default.aspx/SearchEmployees") %>',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
userName: item.UserName,
userId: item.UserId,
image: item.ImageName,
name: item.Name
}
}))
},
error: function (response) { alert(response.responseText); },
failure: function (response) { alert(response.responseText); }
});
},
select: function (event, ui) {
$("[id*=txtSearch]").val(ui.item.name);
window.location.href = "ItemPage.aspx?Id=" + ui.item.userId;
return false;
},
minLength: 1
}).data("ui-autocomplete")._renderItem = function (ul, item) {
var url = "";
if (item.image != "No Image") {
url = "PROFILEPHOTOS/" + item.image;
}
else {
url = "Site_Images/image_missing.JPG";
}
var div = $("<li>").append("<a style='padding-left:40px; height:100px; display:block; background-image:url(" + url + ");" +
"background-repeat:no-repeat;background-position:left center;' >" + item.name + "</a>")
.appendTo(ul);
return div;
};
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Enter search term:<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
</div>
</form>
</body>
C#
public class EmployeeDetails
{
public int UserId;
public string UserName;
public string Name;
public string ImageName;
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static List<EmployeeDetails> SearchEmployees(string prefix)
{
DataTable dt = new DataTable();
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "SELECT UserId,UserName,Name,ImageName FROM User3 WHERE UserName LIKE @SearchText + '%'";
cmd.Parameters.AddWithValue("@SearchText", prefix);
cmd.Connection = conn;
SqlDataAdapter sda = new SqlDataAdapter(cmd);
conn.Open();
sda.Fill(dt);
conn.Close();
}
}
List<EmployeeDetails> employeeDetails = new List<EmployeeDetails>();
foreach (DataRow dr in dt.Rows)
{
EmployeeDetails employeeDetail = new EmployeeDetails
{
UserName = dr["UserName"].ToString(),
UserId = Convert.ToInt32(dr["UserId"].ToString()),
ImageName = IsFileExist(dr["ImageName"].ToString()) ? dr["ImageName"].ToString() : "No Image",
Name = dr["Name"].ToString()
};
employeeDetails.Add(employeeDetail);
}
return employeeDetails;
}
public static bool IsFileExist(string fileName)
{
bool isFileExists = false;
if (!string.IsNullOrEmpty(fileName))
{
if (File.Exists(HttpContext.Current.Server.MapPath("~/PROFILEPHOTOS/") + fileName))
{
isFileExists = true;
}
}
return isFileExists;
}
VB.Net
Public Class EmployeeDetails
Public UserId As Integer
Public UserName As String
Public Name As String
Public ImageName As String
End Class
<WebMethod()> _
<ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _
Public Shared Function SearchEmployees(prefix As String) As List(Of EmployeeDetails)
Dim dt As New DataTable()
Using conn As New SqlConnection()
conn.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using cmd As New SqlCommand()
cmd.CommandText = "SELECT UserId,UserName,Name,ImageName FROM User3 WHERE UserName LIKE @SearchText + '%'"
cmd.Parameters.AddWithValue("@SearchText", prefix)
cmd.Connection = conn
Dim sda As New SqlDataAdapter(cmd)
conn.Open()
sda.Fill(dt)
conn.Close()
End Using
End Using
Dim employeeDetails As New List(Of EmployeeDetails)()
For Each dr As DataRow In dt.Rows
Dim employeeDetail As New EmployeeDetails() With {
.UserName = dr("UserName").ToString(),
.UserId = Convert.ToInt32(dr("UserId").ToString()),
.ImageName = If(IsFileExist(dr("ImageName").ToString()), dr("ImageName").ToString(), "No Image"),
.Name = dr("Name").ToString()
}
employeeDetails.Add(employeeDetail)
Next
Return employeeDetails
End Function
Public Shared Function IsFileExist(fileName As String) As Boolean
Dim isFileExists As Boolean = False
If Not String.IsNullOrEmpty(fileName) Then
If File.Exists(HttpContext.Current.Server.MapPath("~/PROFILEPHOTOS/") & fileName) Then
isFileExists = True
End If
End If
Return isFileExists
End Function
ScreenShot
