Introduction
In this article I will tell you how to create an AutoComplete List using jQuery.
We are always fascinated when we see that as we start typing in the TextBox, it automatically starts showing the text or data containing the relevant text or data, here I will create such an application using jQuery.
Step 1
For this type of application you need to add the following two external jQuery files:
- jQuery-1.9.1.js
- jQuery-ui-1.10.3.js
You can either download these files from the jQuery official website or you can download the source code of this application that I provided at the start of this article.
Step 2
After adding these files I worked on the JavaScript section of this application, write the following code in the head section of your application:
<script>
$(function () {
var names = [
"Ankita",
"Anshika",
"Anubhav",
"Deepika",
"Lata",
"Saurabh",
"Sumit",
"Surabhi"
];
$("#name").autocomplete({
source: names
});
});
</script>
Here I created a function in which some initial values are passed in the variable "names".
After this I used the AutoComplete property in which you also need to provide the source for that AutoComplete, for that I provided the variable name in which all the names were passed.
Step 3
Now our work on jQuery is completed and we can move toward the design section.
Write this code in the body section:
<div>
<h2 runat="server">Simple Example for AutoComplete List</h2>
<br />
<label for="name">Start Typing Name: </label>
<input id="name">
</div>
Here I took a label and a TextBox, Id of the TextBox is "name", this is the TextBox to which the AutoComplete property is bound.
This is the simplest example of showing how you can create an AutoComplete list.
Now our application is created and is ready for execution.
Output
On running the application you will get output like this one:
![autocomplete list]()
Here a simple TextBox is provided in which the user can start typing.
As he will start to enter some text, relevant data will be shown to him as in the following:
![autocomplete list]()
The complete code of this application is as follows:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.3.js"></script>
<script>
$(function () {
var names = [
"Ankita",
"Anshika",
"Anubhav",
"Deepika",
"Lata",
"Saurabh",
"Sumit",
"Surabhi"
];
$("#name").autocomplete({
source: names
});
});
</script>
</head>
<body>
<div>
<h2 runat="server">Simple Example for AutoComplete List</h2>
<br />
<label for="name">Start Typing Name: </label>
<input id="name">
</div>
</body>
</html>