Selectize support for option group (optgroup)

[haovn]

Selectize should support for option group (optgroup). Currently i can not render optgroup in selectize-dropdown.

[marcioaguiar]

looking forward for this, too!

[tikal]

So do I

[brianreavis]

In the works :)

[davidkaneda]

Just chiming in that this would be great :) Would also be great to have different data sources/templates, not sure if it's asking too much.

Essentially, my app needs an apple.com like search bar (which I was planning on using Typeahead, ~same size of Selectize), but also tag tokenization (for which I was planning on using TagsInput, another few kb), but would be awesome if there was one plugin that handled both well :)

[brianreavis]

Ahh, custom templates for different optgroups? That could be hot.

Perhaps data would just have an "optgroup" field that you could then look for when rendering individual options. This would allow custom appearance depending on which optgroup the option is a part of.

[jbrooksuk]

@brianreavis why not have it in the render object?

[brianreavis]

@jbrooksuk Optgroups themselves could have their own render function, yes. I was referring to individual options within an optgroup (just edited to clarify).

[sjhewitt]

@brianreavis Do you know when this might be ready? I need optgroup functionality for the site I'm working on, so am more than happy to dedicate time to implementing/testing to speed up development.

[brianreavis]

Sorry for the delays... I wanted to get to the plugin system in place before getting to this feature. I roughed out support for optgroups tonight. Tomorrow I need to do a cleanup / optimization / refinement pass, then I imagine it'll be ready for release in the evening.

[sjhewitt]

Thanks for your work on this!
I've had a play with the rough implementation, and it's very close to what I need, however what I really want to do is wrap each optgroup in it's own div (so I can position them slightly differently)

The use of > * to listen for event and select Options makes this impossible, as the dom can be build like this:

<div class='selectize-dropdown'>
    <div class='optgroup-wrapper'>
        <div class='optgroup'>foo</div>
        <div class='option' data-value='bar'>Bar</div>
    </div>
</div>

I've implemented a slightly different method of doing things that uses the .option, .create and .item classes to select the relevant children here: https://github.com/sjhewitt/selectize.js/tree/optgroups-wrapper
(note the movies and github examples are currently broken as they don't set the class on the rendered option html)

[brianreavis]

No problem! I think you've got a great point about wrapping... I think that makes a lot of sense. Nice implementation too. The > * selector is something I'm totally open to killing. Instead of adding and relying on classes for determining what's an option and what's not, we could add data-type attributes to each rendered option and optgroup (in the same way that data-value is, for performance). For example:

<div data-type="optgroup" class="optgroup-wrapper">
   <div class="optgroup">foo</div>
   <div data-type="option" data-value="bar">Bar</div>
</div>

Perhaps data-type is a bad name for it... I'll think on it.

[sjhewitt]

It did cross my mind to just apply a data-selectable or data-option to the html generated for the option and option_create... we don't really need to know the type, only that they are a selectable element.

[sjhewitt]

ok, I've updated my version to use data-selectable and also simplified the optgroup-wrapper template into one template call