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

image

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





About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

3 comments:

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