Hi micah,
Refer the below sample.
CS.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;
}
.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 div = $("<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);
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>
</html>
CS.aspx.cs
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.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<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-y: auto;
overflow-x: hidden;
}
</style>
<script type="text/javascript">
$(function () {
$("[id*=txtSearch]").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/VB.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) {
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);
};
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Enter search term:<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
VB.aspx.vb
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
Screenshot
