Hi nauna,
Please refer below sample.
HTML
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js"></script>
<link rel="Stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css" />
<script type="text/javascript">
$(function () {
$("[id$=txtSearch]").autocomplete({
minLength: 1,
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/CS.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]
}
}))
}
});
}
}).data("ui-autocomplete")._renderItem = function (ul, item) {
var div = $("<li/>")
.append('<span style="float:left;">' + item.label.split('-')[0] + '</span><span style="float:right;">' + item.val + '</span><br/>')
.appendTo(ul);
return div;
};
});
</script>
<asp:TextBox ID="txtSearch" runat="server" />
Namespace
C#
using System.Web.Services;
VB.Net
Imports System.Web.Services
Code
C#
[WebMethod]
public static string[] GetDetails(string prefix)
{
List<string> customers = new List<string>();
customers.Add(string.Format("{0}-{1}", "Shayak", "Student"));
customers.Add(string.Format("{0}-{1}", "Nayak", "Teacher"));
customers.Add(string.Format("{0}-{1}", "Sudha", "Manager"));
return customers.ToArray();
}
VB.Net
<WebMethod>
Public Shared Function GetDetails(ByVal prefix As String) As String()
Dim customers As List(Of String) = New List(Of String)()
customers.Add(String.Format("{0}-{1}", "Shayak", "Student"))
customers.Add(String.Format("{0}-{1}", "Nayak", "Teacher"))
customers.Add(String.Format("{0}-{1}", "Sudha", "Manager"))
Return customers.ToArray()
End Function
Screenshot