In this article I will explain with an example, how to implement
jQuery Autocomplete with Remote Source URL in HTML.
JSON File URL
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 following elements:
TextBox – For capturing Name of the customer.
Button – For displaying selected customer
Name and
CustomerId in
JavaScript Alert Message Box.
HiddenField – For storing 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 inside which the
CustomerId of the selected customer it stored into a HiddenField.
<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 a
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
![Implement jQuery AutoComplete With Remote Source URL in HTML]()
Demo
Downloads
