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:

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