Javascript combobox with typeahead and hierarchical items

Question

I want to create a combobox with a hierarchical list of items. I need to be able to select the parent items as well as the children individually. I also need to be able to provide typeahead capabilities for this combobox.

For example, I want to make a combobox with this data in JS:

Canada

--Ontario

--Quebec

USA

--Massachusetts

--Ohio

--Texas

From this dropdown I want to be able to select any of the provinces/states individually. I also want to be able to select "Canada" without selecting it's children.

I've tried Select2 and have been digging around JQuery UI to see if it is possible, but so far I can't quite achieve the behaviour I need. I'm writing this page using bootstrap, but the given typeahead in boostrap doesn't seem to work with comboboxes at all (that I can see).

Answer 1

You can use Chosen javascript plugin to achieve this. http://harvesthq.github.com/chosen/