Introduction: jQuery
is a fast, small, and feature-rich JavaScript library. Autocomplete
enables users to quickly find and select from a pre-populated list of values as
they type. It can be used on any search fields such as
products, or any application that collects street address, or a city, or a
country, or anything else that may be a choice from a common dataset. The
jQuery UI Autocomplete is easy to use, powerful and flexible.
The
example dataset includes a list of fruits. As you begin typing, the input field
will automatically popup with suggestions that match your query.
Code:
<html>
<head>
<!-- Add these three
libraries-->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/black-tie/jquery-ui.css" type="text/css" />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'></script>
<script>
/* Example Fruits */
$(document).ready(function() {
$( "#Fruit" ).autocomplete({
source: Fruits
});
});
var Fruits = ["Apple","Apricot","Avocado","Banana","Berry","Cherry",
"Clementine","Date","Fig","Grape","Guava","Kiwi","Mango",
"Melon","Orange","Peer","Pineapple","Strawberry","Plum","Watermelon"];
</script>
</head>
<body>
<form>
<input id="Fruit" type="text" />
</form>
</body>
</html>
Output:
No comments:
Post a Comment