In this article I will explain with an example, how to use _renderItem with jQuery AutoComplete in HTML.
 
 

JSON File URL

The following JSON file will be used in this article.
https://raw.githubusercontent.com/aspsnippets/test/master/Customers.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": "RobertSchidner",
    "Country": "Russia"
  }
]
 
 

HTML Markup

The HTML Markup consists of following elements:
TextBox – For capturing Name of the customer.
Button – For displaying selected Name and CustomerId of selected customer in JavaScript Alert Message Box.
HiddenField – For storing Name of selected customer 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 script 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.
The jQuery AutoComplete plugin has been assigned with the following properties and functions.
Properties:
minLength – For setting minimum character length needed for suggestions to be rendered. Here it is set to 1.
 
Functions:
source – Inside this function, a jQuery AJAX call is made to the API which acts as a source of data to the jQuery AutoComplete.
The data received from the API is processed inside the jQuery AJAX call Success event handler and Name and CustomerId of the customer are set into label and value properties respectively.
 
select – This event handler is called when an option is selected from the suggestions.
Inside this event handler, the CustomerId of the selected customer is stored into a HiddenField.
 

Using _renderItem with jQuery

create – Inside the function, the jQuery AutoComplete plugin has been assigned with a _renderItem function, inside which an HTML i.e. Unordered List (UL) is generated.
The HTML consists of an HTML DIV for displaying Customer Name.
Note: The Customer Name is set with the value the label property.
 
Finally, the generated Unordered List is assigned to the LI tag which is ultimately returned and to be displayed as option below the jQuery AutoComplete TextBox.
<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();
                $.ajax({
                     url: "https://raw.githubusercontent.com/aspsnippets/test/master/Customers.json",
                     dataType: "json",
                     success: function (customers) {
                        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
                            };
                        }))
                     },
                     error: function (data) {
                        response(data.responseText);
                    }
                });
            },
            select: function (e,i) {
                $("#hfCustomerId").val(i.item.val);
            },
            minLength: 0,
            create: function () {
                $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
                    var items = $('<div class="container">'
                         +'<span class="item">' + item.label + '</span>'
                         +'</div>');
                    return $("<li>").append(items).appendTo(ul);
                }
            }
        }).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 the jQuery click event handler.
When Submit Button is clicked, the TextBox and HiddenField values i.e. Name and CustomerId are retrieved and displayed using 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 customerId);
        });
    });
</script>
 
 

Screenshot

Using _renderItem with jQuery AutoComplete in HTML
 
 

Demo

View Demo
 
 

Downloads

Download Code