jQuery: Editable Combo Box

Tweet

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:

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



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.

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

Tweet

About The Author

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.