Hi micah,
Refer the below sample.
HTML
Default.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head 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;
}
</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
}).autocomplete("instance")._renderItem = function (ul, item) {
return $("<li>").append("<a><img class='image' src='PROFILEPHOTOS/" + item.image + "' class='img-rounded' />")
.append("<p class='name'>" + item.name + "</p></a>")
.append("<p class='username'>" + item.userName + "</p>")
.appendTo(ul);
};
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Enter search term:<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
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 = dr["ImageName"].ToString(),
Name = dr["Name"].ToString()
};
employeeDetails.Add(employeeDetail);
}
return employeeDetails;
}
VB.Net
Partial Class VB
Inherits System.Web.UI.Page
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 = dr("ImageName").ToString(), _
.Name = dr("Name").ToString() _
}
employeeDetails.Add(employeeDetail)
Next
Return employeeDetails
End Function
End Class
Screenshot
jQuery
}).autocomplete("instance")._renderItem = function (ul, item) {
return $("<li>").append("<a><img class='image' src='PROFILEPHOTOS/" + item.image + "' class='img-rounded' />")
.append("<p class='name'>" + item.name + "</p></a>")
.append("<p class='username'>" + item.userName + "</p>")
.appendTo(ul);
};
Or you can replace the above code withe the below to get the below output.
}).data("ui-autocomplete")._renderItem = function (ul, item) {
return $("<li>").append("<a style='padding-left:40px; height:100px; display:block; background-image:url(PROFILEPHOTOS/" + item.image + ");" +
"background-repeat:no-repeat;background-position:left center;' >" + item.name + "</a>")
.appendTo(ul);
};
Screenshot
