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",
    "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.
<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="" />
<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
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.
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);
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
Populate jQuery AutoComplete from API in ASP.Net