I needed a multiselect box for labels. The labels each have types. Two types are mandatory to add. I tried multiple select boxes, a singular one for each type and a multiple one for all the rest, but it looked ugly and it was annoying to gather the list of labels afterwards.
Instead I created this function:
updateSelect2 = function ($element) {
var labels = $element.select2("data"),
selOpts = $element.data("select2").opts;
if (labels.none(function(l){return l.t==="Product"})) {
selOpts.query = this.productQuery;
selOpts.minimumInputLength = 0;
} else if (labels.none(function(l){return l.t==="Activity"})) {
selOpts.query = this.activityQuery;
selOpts.minimumInputLength = 0;
} else {
selOpts.query = this.labelQuery;
selOpts.minimumInputLength = 2;
}
}
It gets called after the initSelection and on change. As you can see it digs into the private data and changes the query function around, not so nice.
I wonder if this is a somewhat valid use case and if there would be a nicer way to specify this on Select2, for example by allowing to update options with e.g. a $el.select2("setOpt","query",Select2.query.local(choiceArray)) call?
I needed a multiselect box for labels. The labels each have types. Two types are mandatory to add. I tried multiple select boxes, a singular one for each type and a multiple one for all the rest, but it looked ugly and it was annoying to gather the list of labels afterwards.
Instead I created this function:
It gets called after the initSelection and on change. As you can see it digs into the private data and changes the query function around, not so nice.
I wonder if this is a somewhat valid use case and if there would be a nicer way to specify this on Select2, for example by allowing to update options with e.g. a $el.select2("setOpt","query",Select2.query.local(choiceArray)) call?