Selectize.js: Loading optgroup results from the server.

[jayalfredprufrock]

It seems awkward having to manually specify the potential optgroups for selectize to properly group items. I understand that the current implementation offers a little more flexibility in terms of optgroup labels/ids, but when loading search results from a server it would be super handy if selectize would automatically pull out all the unique optgroups from the results, perhaps only when the optgroups array was not set manually during initialization.

I've tried to set the optgroups array within the load event (after pulling out the unique optgroups), but that doesn't seem to be working.

[fragtom]

Exactly my point of view, I also investigated time to load data from solr source (autocomplete). I would like to use the facet or property of one item to use as an optgroup (with image, label, description.).
Any idea/solution for that would be helpful..

    render: {
      optgroup_header: function(item, escape) {
        return '<div class="optgroup-header">' +
            escape(item.type) +
           '</div>';
      },
      option: function(item, escape) {
        return '<div>' +               
           '<span class="title">' +
           '<span class="name">' + escape(item.textsuggest) + '</span> ' +
           '</div>';
      }
    },
    load: function(query, callback) {
      if (!query.length) return callback();
      $.ajax({
        url: '/solr/' + encodeURIComponent(query),
        type: 'GET',
        dataType: 'json',
        error: function() {
          callback();
        },
        success: function(res) {
          callback(res.response.docs);
        }
      });
    }

[seedy]

Up. I know javascript doesn't appreciate object modeling, but still most of data is received on client side as Json array.

[romansklenar]

Let's say I'd like to implement grouped options like in demo but using a remote loading.

I'd expect implementation like this:

# gears.json
[
  {"id":1, "name":"Bolts", "optgroup":"Climbing"},
  {"id":2, "name":"Cams", "optgroup":"Climbing"},
  {"id":3, "name":"Nuts", "optgroup":"Climbing"},
  {"id":4, "name":"Sling", "optgroup":"Climbing"},
  {"id":5, "name":"Stoppers", "optgroup":"Climbing"},
  {"id":11, "name":"Poles", "optgroup":"Skiing"},
  {"id":12, "name":"Skins", "optgroup":"Skiing"},
  {"id":13, "name":"Skis", "optgroup":"Skiing"}
]

$('select').selectize({
    valueField: 'id',
    labelField: 'name',
    searchField: 'name',
    optgroupField: 'optgroup',
    preload: true,
    load: function(query, callback) {
        $.ajax({
            url: '/gears.json',
            type: 'GET',
            dataType: 'json',
            error: function() {
                callback();
            },
            success: function(result) {
                callback(result);
            }
        });
    }
});

But it actually doesn't work (see http://jsfiddle.net/aBkgs/58/). I think this would be nice feature. Does options optgroupValueField, optgroupLabelField and optgroupField actually works now? What is their usage?

[bobs619]

So sad we can't dynamically create optgroups on load. oh well, back to select2

[sps196]

I've just hit this same problem. Has anyone figured out a way to create optgroups on load?

[chrise86]

Also run into this issue, anyone got a solution?

[chrise86]

I managed to do it using something like this:

load: function(query, callback) {
  self = this;
  $.ajax({
    url: '/customurl',
    type: 'GET',
    error: function() {
      callback();
    },
    success: function(res) {
      $.each(res, function(index, value) {
        self.addOptionGroup(value['product_title'], { title: value['product_title'] });
      });
      self.refreshOptions();
      callback(res);
    }
  });
}

[roupen]

+1 this should be supported when the server returns a data structure similar to what the client side setup of opt groups and options. thanks @chrise86 for the workaround though saved me from having to toy around myself!

[risadams]

closing stale issues older than one year.
If this issue was closed in error please message the maintainers.
All issues must include a proper title, description, and examples.