Click here to Skip to main content
15,867,308 members
Articles / Web Development / ASP.NET / ASP.NET4.0
Tip/Trick

Custom ASP.NET DropdownList Control Using Chosen jQuery Plugin

Rate me:
Please Sign up or sign in to vote.
4.94/5 (20 votes)
26 Oct 2015CPOL1 min read 277.3K   7.5K   25   74
Custom ASP.NET DropdownList control using chosen jQuery plugin

Introduction

The ASP.NET DropDownList is an easy way to offer a set of selections for the user. However, if you want to allow the user to enter information not available in the dropdown list, you will have to write your own JavaScript code or jQuery. This source code combines that work into an ASP.NET DLL control you can easily place on any ASP.NET web page.

The downloadable source project above uses the following technologies:

Example

Background

You do not need to have knowledge of jQuery, JavaScript, or CSS to use the DropDownListChosen. The only requirement is to drag and drop the DropDownListChosen control. The source code download contains the class library project for the DropDownListChosen and a test website using the DropDownListChosen control.

Using the Nuget-Package

You can now reference this project as a nuget package.

  • Install-Package DropDownListChosen

This will add necesary configuration for you, just add the control tag to your webform like this.

ASP.NET
<asp:DropDownListChosen ID="DropDownListChosen1" runat="server" 
            NoResultsText="No results match." width="350px"            
            DataPlaceHolder="Type Here..." AllowSingleDeselect="true">                
        </asp:DropDownListChosen>
  1. Bind items to your dropdown list either manually by adding ListItems to the DropDownListChosen or by binding to a DataSource.
    Datasource example can be found in the downloadable source code above.

You're done! You can now work with your DropDownListChosen to find what options work best for you. I would love to hear some great feedback if you use this control on your site.

Also added a repository on github.

https://github.com/arbh89/DropDownListChosen

History

  • 13th July, 2013: Tip published
  • 7th August, 2013: Added DataPlaceHolder property and removed style sheet that causes design problems
  • 7th September, 2013: Added new properties AllowSingleDeselect and DisableSearchThreshold
  • 25 Octiber, 2015: Added as a Nuget Package

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer Communications
Nicaragua Nicaragua
I am a ASP.Net Software Developer from Nicaragua.

Comments and Discussions

 
QuestionHow to change the style? Pin
krysler23-Jun-21 21:49
krysler23-Jun-21 21:49 
Questionhow to set the value for this control Pin
bhuvanagopalan22-Nov-17 5:17
bhuvanagopalan22-Nov-17 5:17 
Questionproblem or bug when i use! Pin
Darknalk21-Sep-17 11:36
Darknalk21-Sep-17 11:36 
QuestionHow to fill a dropdownlistchosen using AJAX Pin
Member 1328073127-Jun-17 0:49
Member 1328073127-Jun-17 0:49 
QuestionGreat Control.How do i do match text in between the values? Pin
norbertabone18-Jul-16 8:02
norbertabone18-Jul-16 8:02 
AnswerRe: Great Control.How do i do match text in between the values? Pin
Angel Blandón11-Aug-16 8:14
Angel Blandón11-Aug-16 8:14 
QuestionWebforms - Script Manger Pin
Member 1120597618-Apr-16 8:15
Member 1120597618-Apr-16 8:15 
QuestionHow to use for child direcotry? Pin
KiranKumar Roy9-Apr-16 22:42
KiranKumar Roy9-Apr-16 22:42 
QuestionTarget framework 2.0 Pin
Paladin201023-Mar-16 22:41
Paladin201023-Mar-16 22:41 
BugLook & Feel In IE, Select Index change Pin
Patel Mayur R.7-Jan-16 22:57
Patel Mayur R.7-Jan-16 22:57 
QuestionGREAT! Though I found a bug Pin
jgakenhe27-Oct-15 7:31
professionaljgakenhe27-Oct-15 7:31 
QuestionDoes this work well on mobile? Pin
Dewey26-Oct-15 15:02
Dewey26-Oct-15 15:02 
AnswerRe: Does this work well on mobile? Pin
Angel Blandón27-Oct-15 7:47
Angel Blandón27-Oct-15 7:47 
Questionhello friend. Pin
Mojtaba Setoodeh16-Oct-15 21:43
Mojtaba Setoodeh16-Oct-15 21:43 
AnswerRe: hello friend. Pin
Angel Blandón20-Oct-15 10:16
Angel Blandón20-Oct-15 10:16 
GeneralRe: hello friend. Pin
Mojtaba Setoodeh25-Oct-15 23:10
Mojtaba Setoodeh25-Oct-15 23:10 
QuestionHow to load the dropdown without selecting any item Pin
Member 101991945-Aug-15 23:56
Member 101991945-Aug-15 23:56 
QuestionNot enabling search option while call this control page in iframe Pin
Member 1019919423-Jul-15 20:09
Member 1019919423-Jul-15 20:09 
QuestionSelectedIndexChanged function not firing up Pin
mehboob samnani23-Jul-15 2:28
mehboob samnani23-Jul-15 2:28 
AnswerRe: SelectedIndexChanged function not firing up Pin
Angel Blandón26-Jul-15 13:15
Angel Blandón26-Jul-15 13:15 
QuestionControl Problem Pin
UAB Mike Johnston15-Apr-15 2:39
UAB Mike Johnston15-Apr-15 2:39 
QuestionHow to Add the item if it is not in the list Pin
STPL TEST15-Apr-15 2:28
STPL TEST15-Apr-15 2:28 
QuestionRTL right to left direction sites not working properly Pin
nawinsoft26-Mar-15 6:57
nawinsoft26-Mar-15 6:57 
Questionunable to search if i add items dynamically Pin
Malar Karthik6-Mar-15 17:00
Malar Karthik6-Mar-15 17:00 
AnswerRe: unable to search if i add items dynamically Pin
Angel Blandón7-Mar-15 15:44
Angel Blandón7-Mar-15 15:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.