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>

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<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&#8221; />

  <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

autocompletes Textbox

For more information, download the attached sample application
https://www.box.com/s/8oupor9s7oll2spoiu7y

Theo c-sharpcorner

Về tieuyeuit
Lập trình viên Asp.net Tôi chia sẻ một,bạn chia sẻ một và chúng ta có rất nhiều!

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: