In this article I will explain with an example, how to populate
jQuery AutoComplete form API in ASP.Net using C# and VB.Net.
ASPSnippets Test API
The following API will be used in this article.
The API returns the following JSON.
[
{
"CustomerId": 1,
"Name": "John Hammond",
"Country": "United States"
},
{
"CustomerId": 2,
"Name": "Mudassar Khan",
"Country": "India"
},
{
"CustomerId": 3,
"Name": "Suzanne Mathews",
"Country": "France"
},
{
"CustomerId": 4,
"Name": "Robert Schidner",
"Country": "Russia"
}
]
HTML Markup
The HTML Markup consists of:
TextBox – For capturing Name of the customer.
Button – For displaying selected customer
Name and
CustomerId in
JavaScript Alert Message Box.
HiddenField – For capturing selected customer Name from the TextBox.
<asp:TextBox runat="server" ID="txtName"></asp:TextBox>
<asp:Button runat="server" ID="btnSubmit"Text="Submit"OnClick="OnSubmit" />
<asp:HiddenField runat="server" ID="hfCustomerId" />
jQuery AutoComplete Plugin implementation
Inside the HTML, the following
jQuery UI CSS file is inherited.
1. jquery-ui.css
And then, the following
jQuery and
jQuery UI JS files are inherited.
1. jquery.min.js
2. jquery-ui.min.js
Inside the
jQuery document ready event handler, the TextBox has been applied with the
jQuery AutoComplete plugin.
A
jQuery Get call is made to get list of customers returned from the URL which acts as a source of data to the
jQuery AutoComplete.
A
Select event handler has been defined for the
jQuery AutoComplete and items are selected from the
AutoComplete List.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=txtName]").autocomplete({
source: function (request, response) {
var prefix = request.term.toLowerCase();
$.get("https://raw.githubusercontent.com/aspsnippets/test/master/Customers.json", function (data, status) {
var customers = JSON.parse(data);
if (prefix != '') {
customers = customers.filter(function (customer) {
return customer.Name.toLowerCase().indexOf(prefix) != -1
});
}
response($.map(customers, function (customer) {
return {
label: customer.Name,
val: customer.CustomerId
};
}))
});
},
select: function (e, i) {
$("[id*=hfCustomerId]").val(i.item.val);
},
minLength: 0
}).focus(function () {
$(this).autocomplete("search");
});
});
</script>
Displaying Name and CustomerId of Selected Customer
When Submit button is clicked, the Name and CustomerId of selected customer are fetched form the Request.Form collection.
Finally, the
Name and
CustomerId are displayed in
JavaScript Alert Message Box using
RegisterStartupScript method.
C#
protected void OnSubmit(object sender, EventArgs e)
{
string customerName = Request.Form[txtName.UniqueID];
string customerId = Request.Form[hfCustomerId.UniqueID];
ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Name: " + customerName + "\\nID: " + customerId + "');", true);
}
VB.Net
Protected Sub OnSubmit(sender As Object, e As EventArgs)
Dim customerName As String = Request.Form(txtName.UniqueID)
Dim customerId As String = Request.Form(hfCustomerId.UniqueID)
ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert('Name: " & customerName & "\nID: " & customerId & "');", True)
End Sub
Screenshot
![Populate jQuery AutoComplete from API in ASP.Net]()
Demo
Downloads
