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",
    "CustomerId": 3,
    "Name""Suzanne Mathews",
    "CustomerId": 4,
    "Name""Robert Schidner",
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="" />
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
    $(function () {
            source: function (request, response) {
                var prefix = request.term.toLowerCase();
                $.get("", 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) {
            minLength: 0
        }).focus(function () {
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);
Populate jQuery AutoComplete from API in HTML