Introduction
AutoSuggeation shows a small window like a popup panel to the display words of the prefix typed into the TextBox. For example a country text box, that will fill in the entry India when the first letter is typed, then displays a suggestion list like a popup panel.
In this article I will explain how to create an AutoSuggestion by default in jQuery.
Complete Program
AutoSuggestion_Demo.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>AutoSuggestion in jQuery - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function () {
var CountryName = [
"Australia",
"Austria",
"Azerbaijan",
"Bahamas",
"Bangladesh",
"Canada",
"China",
"Czech Republic",
"Denmark",
"Egypt",
"El Salvador",
"French Southern Territorie",
"Germany",
"Guatemala",
"Hong Kong",
"Hungary",
"Iceland",
"India",
"Indonesia",
"Iran, Islamic Republic Of",
"Jamaica",
"Kenya",
"Liberia",
"Luxembourg",
"Macao",
"Nepal",
"Islands",
"Norway",
"Oman",
"Pakistan",
"Rwanda",
"Sri Lanka",
"United Kingdom",
"United States"
];
$("#name").autocomplete({
source: CountryName
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">CountryName: </label>
<input id="name" />
</div>
</body>
</html>
Output
![Animation1.gif]()
For more information, download the attached sample application.