Skip to content

Fix selectize maxOptions limit for large option lists #348

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
superdav42 merged 1 commit into from
Feb 28, 2026
+140 −127
Merged

Fix selectize maxOptions limit for large option lists #348

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
265 changes: 139 additions & 126 deletions assets/js/selectizer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,202 +1,215 @@
/* global _, wu_initialize_selectizer, wu_selector */
(function($) {

$(document).ready(function() {
$(document).ready(function() {

window.wu_initialize_selectizer = function() {
window.wu_initialize_selectizer = function() {

jQuery('[data-selectize]').selectize();
$.each($('[data-selectize]'), function(index, item) {

$.each($('[data-selectize-categories]'), function(index, item) {
const $el = jQuery($(item));
const optionCount = $el.find('option').length;
const settings = {};

jQuery($(item)).selectize({
maxItems: $(item).data('max-items') || 10,
create(input) {
// Override maxOptions when the select has many options (e.g. TLD lists)
if (optionCount > 1000) {
settings.maxOptions = optionCount + 100;
}

return {
value: input,
text: input,
};
$el.selectize(settings);

},
});
});

});
$.each($('[data-selectize-categories]'), function(index, item) {

$.each($('[data-model]'), function(index, item) {
jQuery($(item)).selectize({
maxItems: $(item).data('max-items') || 10,
create(input) {

wu_selector({
el: item,
valueField: $(item).data('value-field'),
labelField: $(item).data('label-field'),
searchField: $(item).data('search-field'),
maxItems: $(item).data('max-items'),
selected: $(item).data('selected'),
options: [],
data: {
action: 'wu_search',
model: $(item).data('model'),
number: 10,
exclude: $(item).data('exclude'),
include: $(item).data('include'),
},
});
return {
value: input,
text: input,
};

});
},
});

};
});

wu_initialize_selectizer();
$.each($('[data-model]'), function(index, item) {

jQuery('body').on('wubox:load', function() {
wu_selector({
el: item,
valueField: $(item).data('value-field'),
labelField: $(item).data('label-field'),
searchField: $(item).data('search-field'),
maxItems: $(item).data('max-items'),
selected: $(item).data('selected'),
options: [],
data: {
action: 'wu_search',
model: $(item).data('model'),
number: 10,
exclude: $(item).data('exclude'),
include: $(item).data('include'),
},
});

wu_initialize_selectizer();
});

});
};

});
wu_initialize_selectizer();

window.wu_selector = function wu_selector(options) {
jQuery('body').on('wubox:load', function() {

options = _.defaults(options, {
options: [],
maxItems: 1,
templateName: false,
create: false,
});
wu_initialize_selectizer();

if (jQuery(options.el).data('init')) {
});

return;
});

} // end if;
window.wu_selector = function wu_selector(options) {

jQuery(options.el).data('__options', options);
options = _.defaults(options, {
options: [],
maxItems: 1,
templateName: false,
create: false,
});

const select = jQuery(options.el).selectize({
valueField: options.valueField,
labelField: options.labelField,
searchField: ['text', 'name', 'display_name', 'domain', 'path', 'title', 'desc', 'code', 'post_title', 'reference_code'],
options: options.options,
maxItems: options.maxItems,
create: options.create,
render: {
option(option) {
if (jQuery(options.el).data('init')) {

const templateName = options.templateName ? options.templateName : options.data.model;
return;

const template_html = jQuery('#wu-template-' + templateName).length
? jQuery('#wu-template-' + templateName).html()
: jQuery('#wu-template-default').html();
} // end if;

const template = _.template(template_html, {
interpolate: /\{\{(.+?)\}\}/g,
});
jQuery(options.el).data('__options', options);

const render = template(option);
const select = jQuery(options.el).selectize({
valueField: options.valueField,
labelField: options.labelField,
searchField: [ 'text', 'name', 'display_name', 'domain', 'path', 'title', 'desc', 'code', 'post_title', 'reference_code' ],
options: options.options,
maxItems: options.maxItems,
create: options.create,
render: {
option(option) {

return render;
const templateName = options.templateName ? options.templateName : options.data.model;

},
},
load(query, callback) {
const template_html = jQuery('#wu-template-' + templateName).length
? jQuery('#wu-template-' + templateName).html()
: jQuery('#wu-template-default').html();

if (! query.length) {
const template = _.template(template_html, {
interpolate: /\{\{(.+?)\}\}/g,
});

return callback();
const render = template(option);

} // end if;
return render;

const __options = jQuery(options.el).data('__options');
},
},
load(query, callback) {

jQuery.ajax({
// eslint-disable-next-line no-undef
url: wu_selectizer.ajaxurl,
type: 'POST',
data: {
...__options.data,
query: {
search: '*' + query + '*',
},
},
error() {
if (! query.length) {

callback();
return callback();

},
success(res) {
} // end if;

selectize.savedItems = res;
const __options = jQuery(options.el).data('__options');

callback(res);
jQuery.ajax({
// eslint-disable-next-line no-undef
url: wu_selectizer.ajaxurl,
type: 'POST',
data: {
...__options.data,
query: {
search: '*' + query + '*',
},
},
error() {

},
});
callback();

},
});
},
success(res) {

jQuery(options.el).attr('data-init', 1);
selectize.savedItems = res;

const selectize = select[0].selectize;
callback(res);

/*
},
});

},
});

jQuery(options.el).attr('data-init', 1);

const selectize = select[ 0 ].selectize;

/*
* Makes sure this is reactive for vue
*/
selectize.on('change', function(value) {
selectize.on('change', function(value) {

const input = jQuery(select[0]);
const input = jQuery(select[ 0 ]);

const vue_app = input.parents('[data-wu-app]').data('wu-app');
const vue_app = input.parents('[data-wu-app]').data('wu-app');

if (vue_app && typeof window['wu_' + vue_app] !== 'undefined') {
if (vue_app && typeof window[ 'wu_' + vue_app ] !== 'undefined') {

window['wu_' + vue_app][input.attr('name')] = value;
window[ 'wu_' + vue_app ][ input.attr('name') ] = value;

} // end if;
} // end if;

});
});

selectize.on('item_add', function(value) {
selectize.on('item_add', function(value) {

let active_item = {
url: null,
};
let active_item = {
url: null,
};

jQuery.each(selectize.savedItems, function(index, item) {
jQuery.each(selectize.savedItems, function(index, item) {

if (item.setting_id === value) {
if (item.setting_id === value) {

active_item = item;
active_item = item;

} // end if;
} // end if;

});
});

if (active_item.url) {
if (active_item.url) {

window.location.href = active_item.url;
window.location.href = active_item.url;

} // end if;
} // end if;

});
});

if (options.selected) {
if (options.selected) {

selectize.options = [];
selectize.options = [];

selectize.clearOptions();
selectize.clearOptions();

const selected_values = _.isArray(options.selected) ? options.selected : [options.selected];
const selected_values = _.isArray(options.selected) ? options.selected : [ options.selected ];

selectize.addOption(selected_values);
selectize.addOption(selected_values);

const selected = _.isArray(options.selected) ? _.pluck(options.selected, options.valueField) : options.selected[options.valueField];
const selected = _.isArray(options.selected) ? _.pluck(options.selected, options.valueField) : options.selected[ options.valueField ];

selectize.setValue(selected, false);
selectize.setValue(selected, false);

} // end if;
} // end if;

};
};

}(jQuery));
2 changes: 1 addition & 1 deletion assets/js/selectizer.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading