jQuery: Editable Combo Box

I stumbled across a cool jQuery plugin that allows you to have editable combo box (HTML Select element). Using this plug-in, you can add, remove and edit items from the list.

Although the plug-in demos have clear instructions on how to setup the plug-in, for the sake of a complete post, here’s how to use this plug-in in your applications:

Step 1: Download the Plug-in and save it as jquery.eComboBox.min.js. Reference the plugin in your page as shown below:

jQuery Combo Edit plugin

Step 2: Declare an HTML Select/ Combo Box on the page

jQuery Combo Edit plugin

Step 3: Call the eComboBox method on the select element


and that’s it. Now load the page and select an element. Start typing in the box and the element will be edited. Hit Enter to save.

jQuery Editable Combo Demo

Similarly to add a new element, select {NEW ELEMENT} and start typing the element name. Hit Enter to save.
To Delete, select the element and hit delete on your keyboard.

There are a couple of options you can use to prevent editing, deleting or adding new elements too. Explore them here with a Live Demo

Will you give this article a +1 ? Thanks in advance

About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal


Anonymous said...

I am able to get editable dropdown list, but how do we get the value entered by selecting {NEW ELEMENT}. i am not able to get value entered.
Please help

Anonymous said...

this is so cool! works like a charm.

Anonymous said...

wish you could get it to go back to drop down. once you start editing, the options are gone and it stays as textbox