In this article I will explain with an example, how to populate
jQuery AutoComplete form API in HTML.
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.
<input type="text" id="txtName" name="name" />
<input type="submit" value="Submit" id="btnSubmit" />
<input type="hidden" id="hfCustomerId" name="customerId" />
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.js
Inside the
jQuery document ready event handler, the input 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 () {
$("#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) {
$("#hfCustomerId").val(i.item.val);
},
minLength: 0
}).focus(function () {
$(this).autocomplete("search");
});
});
</script>
Displaying Name and CustomerId of Selected Customer using JavaScript
Inside the
jQuery document ready event handler, the
Submit Button has been assigned with
jQuery click event handler.
When
Submit button is clicked, the TextBox and HiddenField values are retrieved and displayed in
JavaScript Alert Message Box.
<script type="text/javascript">
$(function () {
$("#btnSubmit").click(function () {
var name = $("#txtName").val();
var customerId = $("#hfCustomerId").val();
alert("Name: " + name + "\nID: " + customerId);
});
});
</script>
Screenshot
![Populate jQuery AutoComplete from API in HTML]()
Demo
Downloads
