Jitesh Byahut 2/25/2014 2317

How To Use Autocomplete Using Jquery

Here we are using JQuery autocomplete.

The Autocomplete provides suggestions while you type into the TextBox and enable user to quickly find and select options.

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>JQuery-autocomplete</title>

    <script src="../../Scripts/Jquery-ui/js/jquery-1.9.1.js" type="text/javascript"></script>

    <script src="../../Scripts/Jquery-ui/js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>

    <link href="../../Scripts/Jquery-ui/css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />

    <script type="text/javascript">

        $(document).ready(function () {

 

            var data = ["Andhra Pradesh", "Arunachal Pradesh", "Assam", "Bihar",

                        "Chhattisgarh", "Goa", "Gujarat", "Haryana", "Himachal Pradesh",

                        "Jammu and Kashmir", "Jharkhand", "Karnataka", "Kerala", "Madhya Pradesh",

                        "Maharashtra", "Manipur", "Meghalaya", "Mizoram", "Nagaland", "Orissa",

                        "Punjab", "Rajasthan", "Sikkim", "Tamil Nadu", "Tripura", "Uttar Pradesh",

                        "Uttarakhand", "West Bengal"];

 

            $("#txtauto").autocomplete({

                source: data

            });

        });

    </script>

   

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:TextBox ID="txtauto" runat="server"></asp:TextBox>

    </div>

    </form>

</body>

</html>

View output :

demoimage

You can set height of option box of autocomplete using Jquery

Here we are using css for height of autocomplete

<style type="text/css">

     .ui-autocomplete {max-height: 200px; overflow-y: auto; overflow-x: hidden;}

     /* IE 6 doesn't support max-height

     * we use height instead, but this forces the menu to always be this tall */

     * html .ui-autocomplete {height: 200px; }

    </style>

View output :

demoimage

You can retrieve selected option from autocomplete using Jquery

Here we are using select event of autocomplete jquery

$("#txtauto").autocomplete({

                source: data,

                select: function (event, ui) {

                    alert("You selected - " + ui.item.value );

                }

            });

View output :

demoimage


Please give your feedback for improving this page