.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Post New Resource Bookmark and Share   

How to add text box for searching inside a drop down in asp.net.

Posted By:Ashutosh Jha       Posted Date: July 31, 2014    Points: 200    Category:    URL: http://www.dotnetspark.com  

Here in this article i will explain, how one can add text box 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 text box 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, find that in 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. 


     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend