Post
Ask Question

Create an Auto Complete List Like Google Using jQuery

Introduction

This article explains how to create an Auto Complete List using jQuery.

On many sites you must have seen that whenever you start writing in any TextBox then it starts showing the predicted and related results that allow you to choose from a number of available options. The best example is Facebook's Friends Finder and of course Google.

This article will help you to create an application that is similar to those applications.

Let's see the procedure required for creating such an application.

Step 1

First of all you need to create a database in which all the country names are to be entered. I had created such a database and it's attached with the Zip Code available at the top of this article.

autocompletelist1.jpg

Step 2

After that you need to add jQuery 1.8.3 js and Jquery-ui. js file to your application.

You can either download my Zip Code and retrieve both the jQuery files from there or can search for them on Google and can download them from another site.

 

  1. <script src="js/jquery-1.8.3.js" type="text/javascript" ></script>  
  2. <script src="js/jquery-ui.js" type="text/javascript" ></script>  

Step 3

After adding these jQuery files we will add some JavaScript code that will help to filter the data from the available amount of data. For that you need to add the following code:

 

  1. <script type="text/javascript">  
  2. function LoadList()  
  3. {  
  4.     var ac=null;  
  5.     ac = <%=listFilter %>;  
  6.         $( "#Country" ).autocomplete({  
  7.           source: ac  
  8.         });  
  9. }  
  10. </script>  

 

This code will work on TextBox and will try to filter the data as the user starts to enter the first letter of the country.

Step 4

Now we will work on the design of our application.

 

  1. <h2>  
  2.    Auto Complete List</h2>  
  3. <div class="auto-complete">  
  4.     <label for="tags">  
  5.         Type Country Name:  
  6.     </label>  
  7.     <input id="Country" />  
  8. </div>  

 

This code will cerate a TextBox in which the user will type the country name and labels are also used.

The complete code of my application is as follows:

 

  1. <head runat="server">  
  2.     <title>Auto Complete List </title>  
  3.     <link rel="stylesheet" href="css/jquery-ui.css" />  
  4.     <script src="js/jquery-1.8.3.js" type="text/javascript" ></script>  
  5.     <script src="js/jquery-ui.js" type="text/javascript" ></script>  
  6.     <script type="text/javascript">  
  7.     function LoadList()  
  8.     {         
  9.         var ac=null;  
  10.         ac = <%=listFilter %>;  
  11.             $( "#Country" ).autocomplete({  
  12.               source: ac  
  13.             });  
  14.     }  
  15.     </script>  
  16. </head>  
  17. <body onload="LoadList()">  
  18.     <form id="form1" runat="server">  
  19.         <h2>  
  20.            Auto Complete List</h2>  
  21.         <div class="auto-complete">  
  22.             <label for="tags">  
  23.                 Type Country Name:  
  24.             </label>  
  25.             <input id="Country" />  
  26.         </div>  
  27.     </form>  
  28. </body>  
  29. </html>  

Output

Now debug your application and see the results.

First of all you will see this kind of page:

autocompletelist2.jpg

Now start typing your country name and you will see a list of countries having those letters begin appearing below the TextBox.

autocompletelist3.jpg


Similar Articles