How to create JQuery Auto Complete textbox in asp.net

Description:-

In this example we explain that how to create autocomplete textbox using jquery in asp.net. or how to populate JQuery UI Autocomplete TextBox.

Here we create autocomplete for textbox not from the database but create when user enter any value or words in textbox and click on save button then it will automatically bind this value to the textbox as an autocomplete item.

We also maintain autocomplete different from each browser means mozila’s autocomplete value not show in chrome and chrome autocomplete value not show in mozila.

We also explain that how to push or insert autocomplete item to the textbox and retrieve it.

Here below is code to create autocomplete textbox using jquery.

var warranty;

        var data = [];

function InitializeRequest(sender, args) {

        }

        function EndRequest(sender, args) {

            // after update occur on UpdatePanel re-init the Autocomplete

            InitAutoCompl();

        }

        function InitAutoCompl() {

           

            var temp = localStorage.getItem('warranty_history');

            warranty = $("#<%= txtWarranty.ClientID%>");

            data = JSON.parse(temp);

           // if (data.length > 0)  //this is for unique value in autocomplete

             //   data = jQuery.unique(data);

            warranty.autocomplete({

                source: data,

                minLength: 0

        }).focus(function () {

            $(this).autocomplete('search', $(this).val())

        });

// Browser Cache to insert or push value to textbox

            var temp = localStorage.getItem('warranty_history');

            var data = [];

            var warrantyValue = warranty.val();

            if (temp != "null" && temp != null)

                data = JSON.parse(temp);

            if ($.trim(warrantyValue).length > 0)

                data.push(warrantyValue);

            if (data.length > 0)

                data = jQuery.unique(data);

            localStorage.setItem('warranty_history', JSON.stringify(data));

            warranty.autocomplete({

                source: data

            });

  <asp:TextBox ID="txtWarranty" runat="server" AutoCompleteType="None" AutoComplete="on"></asp:TextBox>