Post
Ask Question

AutoComplete DropDown Using jQuery With C#

In today's world we often see autocomplete dropdown lists. Whenever you type the first one or two characters of the word they show the words that begin with those characters. jQuery is used basically for providing the look and feel in your application. It provides a good looking and easy way to use an application. In this article, I am showing how to use an autocompleted dropdown list in ASP.NET application with C#.

First of all you need to add two jQuery files and one CSS file. This is given in my zip code folder.

Listing 1: Go to Visual Studio 2010 then select "New" -> "Web site" and choose "Empty Website".

Empty Website

Listing 2: Add a JavaScript and CSS file to your application that is provide in the Zip file.

js and css file
Listing 3: Add a new web page to your application. Go to Solution Explorer and right-click then select "Add new item"then choose "New web form" and name it "FancyDropdownlist.aspx".

Add new web page

Listing 4: Source Code for FnacyDropdownlist.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="FnacyDropdownlist.aspx.cs" Inherits="FnacyDropdownlist" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <style>  
  6.         a img{border: none;}  
  7.         ol li{list-style: decimal outside;}  
  8.         div#container{width: 780px;margin: 0 auto;padding: 1em 0;}  
  9.         div.side-by-side{width: 100%;margin-bottom: 1em;}  
  10.         div.side-by-side > div{float: left;width: 50%;}  
  11.         div.side-by-side > div > em{margin-bottom: 10px;display: block;}  
  12.         .clearfix:after{content: "\0020";display: block;height: 0;clear: both;overflow: hidden;visibility: hidden;}  
  13.     </style>  
  14.     <link rel="stylesheet" href="Style/chosen.css" />  
  15. </head>  
  16. <body>  
  17.     <form runat="server" id="form1">  
  18.         <div id="container">  
  19.             <h2>Selected Value :  
  20.                 <asp:Label runat="server" ID="lblSelectedValue" Style="color: red"></asp:Label></h2>  
  21.             <div class="side-by-side clearfix">  
  22.                 <div>  
  23.                     <asp:DropDownList data-placeholder="Choose a Country..." runat="server" ID="cboCountry" class="chzn-select" Style="width: 350px;">  
  24.                         <asp:ListItem Text="" Value=""></asp:ListItem>  
  25.                         <asp:ListItem Text="Ahemdabad" Value="Ahendabad"></asp:ListItem>  
  26.                         <asp:ListItem Text="Bangalore" Value="Bangalore"></asp:ListItem>  
  27.                         <asp:ListItem Text="Chennai" Value="Chennai"></asp:ListItem>  
  28.                         <asp:ListItem Text="Aagra" Value="Aagra"></asp:ListItem>  
  29.                         <asp:ListItem Text="Mumbai" Value="Mumbai"></asp:ListItem>  
  30.                         <asp:ListItem Text="Hydrabad" Value="Hydrabad"></asp:ListItem>  
  31.                         <asp:ListItem Text="Calcutta" Value="Calcutta"></asp:ListItem>  
  32.                         <asp:ListItem Text="Patna" Value="Patna"></asp:ListItem>  
  33.                         <asp:ListItem Text="Delhi" Value="Delhi"></asp:ListItem>  
  34.                         <asp:ListItem Text="Noida" Value="Noida"></asp:ListItem>  
  35.                         <asp:ListItem Text="Mangalore" Value="Mangalore"></asp:ListItem>  
  36.                         <asp:ListItem Text="Goa" Value="Goa"></asp:ListItem>  
  37.                     </asp:DropDownList><asp:Button runat="server" ID="btnSelect" Text="Get Selected" OnClick="btnSelect_Click" />  
  38.                 </div>  
  39.             </div>  
  40.         </div>  
  41.         <script src="Scripts/jquery.min.js" type="text/javascript"></script>  
  42.         <script src="Scripts/chosen.jquery.js" type="text/javascript"></script>  
  43.         <script type="text/javascript"> $(".chzn-select").chosen(); $(".chzn-select-deselect").chosen({ allow_single_deselect: true }); </script>  
  44.     </form>  
  45. </body>  
  46. </html> 
Listing 5: Code behind FancyDropDownlist.aspx.cs
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Data;  
  8. using System.Data.SqlClient;  
  9.   
  10. public partial class FnacyDropdownlist : System.Web.UI.Page  
  11. {  
  12.     protected void Page_Load(object sender, EventArgs e)  
  13.     {     
  14.     }  
  15.     protected void btnSelect_Click(object sender, EventArgs e)  
  16.     {  
  17.         lblSelectedValue.Text = cboCountry.SelectedValue;  
  18.     }  
  19. }
Listing 6: Run the project in the browser.

Run the project

Output

I hope this article will help you to add auto dropdown list functionality to you application.


Similar Articles