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 jQuery Combo Edit plugin](http://lh6.ggpht.com/-HdsnL4YSOJI/Td8pMt2kE9I/AAAAAAAACAc/YHFhAof7goA/image%25255B5%25255D.png?imgmax=800)
Step 2: Declare an HTML Select/ Combo Box on the page
![jQuery Combo Edit plugin jQuery Combo Edit plugin](http://lh3.ggpht.com/-6cseVczriEc/Td8pN2t0ZZI/AAAAAAAACAg/glkSQdtnlXk/image%25255B2%25255D.png?imgmax=800)
Step 3: Call the eComboBox method on the select element
![image image](http://lh4.ggpht.com/-8yWvH4S_CFk/Td8pOk26r3I/AAAAAAAACAk/ZtWBpiL40do/image%25255B10%25255D.png?imgmax=800)
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 jQuery Editable Combo Demo](http://lh6.ggpht.com/-sjXXzEJc17I/Td8pP8Vz2oI/AAAAAAAACAo/alpUqasmmlg/image%25255B15%25255D.png?imgmax=800)
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
3 comments:
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
this is so cool! works like a charm.
wish you could get it to go back to drop down. once you start editing, the options are gone and it stays as textbox
Post a Comment