AutoSuggestion TextBox In jQuery

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>

<head>

<title>AutoSuggestion in jQuery - Default functionality</title>

$(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>

<label for="tags">CountryName: </label>

</div>

</body>

</html>

Output

For more information, download the attached sample application.