jQuery UI Widget : Autocomplete

Query UI Widget : Autocomplete

Using autocomplete widget , you can add autocomplete feature to your input field. In this field when you will start type something , it will provide a list of related possible values (starting from that letter which you already typed). When you click on any of these , it will auto complete the remaining text.

For options, events ,method and theming click here

EXAMPLE :

autocompleteUI.html

<!DOCTYPE html>

            <html>

            <head>

            <link href="http://ajax.googleapis.com/ajax/libs/jqueryui

            /1.8/themes/base/jquery-ui.css" 
            rel="stylesheet" type="text/css"/>

            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4

            /jquery.min.js"></script>

            <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8

            /jquery-ui.min.js"></script>

            

            <script>

            $(document).ready(function() {

            $("input#autocomplete").autocomplete({

            source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]

            });

            });

            </script>

            </head>

            <body style="font-size:62.5%;">

            <h3><font color="red">Fill the below Field</font></h3>

            Type your language proficiency :

            <input id="autocomplete" />

            </body>

            </html>