Hi micah,
I have created a sample which full fill your requirement you need to modify the code according to your need.
HTML
<div>
<asp:TextBox ID="txtUserName" Width="300px" runat="server" CssClass="form-control" />
</div>
<div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="/resources/demos/style.css" />
<style type="text/css">
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover
{
border: 0px #003eff;
background: white !important;
font-weight: normal;
color: #333333 !important;
}
.ui-menu .ui-menu-item
{
height: 150px !important;
}
.img-circle
{
width: 100px;
}
</style>
<script type="text/javascript">
$(function () {
$("#txtUserName").autocomplete({
minLength: 0,
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/Default.aspx/GetDetails") %>',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
val: item.split('-')[1]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
}
})
.autocomplete("instance")._renderItem = function (ul, item) {
return $("<li>")
.append('<a href="#" data-toggle="modal" data-target="#myModal19">'
+ '<div class="pull-left">'
+ '<img src="UserImages/' + item.val + '" class="img-circle" alt="User Image" /> </div>'
+ '<div style=""><p>' + item.label + '</p></div></a>') //You can format the design in above code in whatever format you want.
.appendTo(ul);
};
});
</script>
</div>
C#
[WebMethod]
public static string[] GetDetails(string prefix)
{
List<string> customers = new List<string>();
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "SELECT [Id],[UserName],[ImageName] FROM [UserImageGallery] WHERE UserName like @SearchText + '%'";
cmd.Parameters.AddWithValue("@SearchText", prefix);
cmd.Connection = conn;
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
customers.Add(string.Format("{0}-{1}", sdr["UserName"], sdr["ImageName"]));
}
}
conn.Close();
}
}
return customers.ToArray();
}
VB.Net
<WebMethod> _
Public Shared Function GetDetails(prefix As String) As String()
Dim customers As New List(Of String)()
Using conn As New SqlConnection()
conn.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using cmd As New SqlCommand()
cmd.CommandText = "SELECT [Id],[UserName],[ImageName] FROM [UserImageGallery] WHERE UserName like @SearchText + '%'"
cmd.Parameters.AddWithValue("@SearchText", prefix)
cmd.Connection = conn
conn.Open()
Using sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
customers.Add(String.Format("{0}-{1}", sdr("UserName"), sdr("ImageName")))
End While
End Using
conn.Close()
End Using
End Using
Return customers.ToArray()
End Function
ScreenShot
