How to add search functionality inside a drop down list in asp.net


Here in this article i will explain, how one can add an option for searching inside a drop down in asp.net. This article will be very useful when you have long list of values inside a dropdown list. In this case you give the user privilege to search the value through the textbox from your dropdown list.

Here in this article i will explain, how one can add an option for searching inside a drop down in asp.net. This article will be very useful when you have long list of values inside a dropdown list. In this case you give the user privilege to search the value through the textbox from your dropdown list.

Create a dropdown from asp.net controls-


<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>

And bind this dropdown box from database. For the demonstration purpose i am keeping some static values over here-


<asp:ListItem Value="1">Delhi</asp:ListItem>
<asp:ListItem Value="2">Bihar</asp:ListItem>
<asp:ListItem Value="3">Karnataka</asp:ListItem>
<asp:ListItem Value="4">Kerla</asp:ListItem>
<asp:ListItem Value="5">Maharastra</asp:ListItem>
<asp:ListItem Value="6">Punjab</asp:ListItem>
<asp:ListItem Value="7">Goa</asp:ListItem>


And for the selection, write the below javaScript function-


<script type="text/javascript">
var config = {
'.chosen-select': {},
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
</script>

I have used here once css class="chosen-select" for the design purpose-


.chosen-container
{
font:1px arial;
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 12px;
zoom: 1;
*display: inline;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.chosen-container .chosen-drop {
position: absolute;
top: 100%;
left: -9999px;
z-index: 1010;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
border: 1px solid #aaa;
border-top: 0;
background: #fff;
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
}

Please find the whole file as an attachment. Also i have used 2 JavaScript file. both have been added as an attachment.

So the whole code of the page will be like below-


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Addtextboxinsidedd.aspx.cs" Inherits="Addtextboxinsidedd" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/chosen.jquery.js" type="text/javascript"></script>
<link href="css/chosen.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server" class="chosen-select" Height="30px" Width="200px">
<asp:ListItem Value="1">Delhi</asp:ListItem>
<asp:ListItem Value="2">Bihar</asp:ListItem>
<asp:ListItem Value="3">Karnataka</asp:ListItem>
<asp:ListItem Value="4">Kerla</asp:ListItem>
<asp:ListItem Value="5">Maharastra</asp:ListItem>
<asp:ListItem Value="6">Punjab</asp:ListItem>
<asp:ListItem Value="7">Goa</asp:ListItem>
</asp:DropDownList>
</div>
<script type="text/javascript">
var config = {
'.chosen-select': {},
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
</script>

</div>
</form>
</body>
</html>


Not forgot to add the JavaScript and css files. Now run your web page and see the output. You will find something like below-

<img src='/attachments/Resources/45818-14739-Output-image-of-this-article.png' alt='Output image of this article' style='padding:10px' >


Attachments

  • Javascript and CSS files for this article (45818-15036-Javascript-and-CSS-files-for-this-article.zip)
  • Comments

    No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: