Knowledge Transfer.........: Query UI Widget : Autocomplete

Wednesday, May 25, 2011

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>

Output :
When you type something , for ex. java , it will show :

Download Source Code

Knowledge Transfer.........

Wednesday, May 25, 2011

Query UI Widget : Autocomplete

No comments:

Post a Comment