Skip to content

Commit 849871a

Browse files
superdav42superdav42
authored
Merge pull request #348 from Ultimate-Multisite/fix/selectize-max-options
Fix selectize maxOptions limit for large option lists
2 parents 9d2003e + 7857ddc commit 849871a

File tree

2 files changed

+140
-127
lines changed

2 files changed

+140
-127
lines changed

‎assets/js/selectizer.js‎

Lines changed: 139 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1,202 +1,215 @@
11
/* global _, wu_initialize_selectizer, wu_selector */
22
(function($) {
33

4-
$(document).ready(function() {
4+
$(document).ready(function() {
55

6-
window.wu_initialize_selectizer = function() {
6+
window.wu_initialize_selectizer = function() {
77

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

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

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

16-
return {
17-
value: input,
18-
text: input,
19-
};
19+
$el.selectize(settings);
2020

21-
},
22-
});
21+
});
2322

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

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

28-
wu_selector({
29-
el: item,
30-
valueField: $(item).data('value-field'),
31-
labelField: $(item).data('label-field'),
32-
searchField: $(item).data('search-field'),
33-
maxItems: $(item).data('max-items'),
34-
selected: $(item).data('selected'),
35-
options: [],
36-
data: {
37-
action: 'wu_search',
38-
model: $(item).data('model'),
39-
number: 10,
40-
exclude: $(item).data('exclude'),
41-
include: $(item).data('include'),
42-
},
43-
});
29+
return {
30+
value: input,
31+
text: input,
32+
};
4433

45-
});
34+
},
35+
});
4636

47-
};
37+
});
4838

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

51-
jQuery('body').on('wubox:load', function() {
41+
wu_selector({
42+
el: item,
43+
valueField: $(item).data('value-field'),
44+
labelField: $(item).data('label-field'),
45+
searchField: $(item).data('search-field'),
46+
maxItems: $(item).data('max-items'),
47+
selected: $(item).data('selected'),
48+
options: [],
49+
data: {
50+
action: 'wu_search',
51+
model: $(item).data('model'),
52+
number: 10,
53+
exclude: $(item).data('exclude'),
54+
include: $(item).data('include'),
55+
},
56+
});
5257

53-
wu_initialize_selectizer();
58+
});
5459

55-
});
60+
};
5661

57-
});
62+
wu_initialize_selectizer();
5863

59-
window.wu_selector = function wu_selector(options) {
64+
jQuery('body').on('wubox:load', function() {
6065

61-
options = _.defaults(options, {
62-
options: [],
63-
maxItems: 1,
64-
templateName: false,
65-
create: false,
66-
});
66+
wu_initialize_selectizer();
6767

68-
if (jQuery(options.el).data('init')) {
68+
});
6969

70-
return;
70+
});
7171

72-
} // end if;
72+
window.wu_selector = function wu_selector(options) {
7373

74-
jQuery(options.el).data('__options', options);
74+
options = _.defaults(options, {
75+
options: [],
76+
maxItems: 1,
77+
templateName: false,
78+
create: false,
79+
});
7580

76-
const select = jQuery(options.el).selectize({
77-
valueField: options.valueField,
78-
labelField: options.labelField,
79-
searchField: ['text', 'name', 'display_name', 'domain', 'path', 'title', 'desc', 'code', 'post_title', 'reference_code'],
80-
options: options.options,
81-
maxItems: options.maxItems,
82-
create: options.create,
83-
render: {
84-
option(option) {
81+
if (jQuery(options.el).data('init')) {
8582

86-
const templateName = options.templateName ? options.templateName : options.data.model;
83+
return;
8784

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

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

96-
const render = template(option);
89+
const select = jQuery(options.el).selectize({
90+
valueField: options.valueField,
91+
labelField: options.labelField,
92+
searchField: [ 'text', 'name', 'display_name', 'domain', 'path', 'title', 'desc', 'code', 'post_title', 'reference_code' ],
93+
options: options.options,
94+
maxItems: options.maxItems,
95+
create: options.create,
96+
render: {
97+
option(option) {
9798

98-
return render;
99+
const templateName = options.templateName ? options.templateName : options.data.model;
99100

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

104-
if (! query.length) {
105+
const template = _.template(template_html, {
106+
interpolate: /\{\{(.+?)\}\}/g,
107+
});
105108

106-
return callback();
109+
const render = template(option);
107110

108-
} // end if;
111+
return render;
109112

110-
const __options = jQuery(options.el).data('__options');
113+
},
114+
},
115+
load(query, callback) {
111116

112-
jQuery.ajax({
113-
// eslint-disable-next-line no-undef
114-
url: wu_selectizer.ajaxurl,
115-
type: 'POST',
116-
data: {
117-
...__options.data,
118-
query: {
119-
search: '*' + query + '*',
120-
},
121-
},
122-
error() {
117+
if (! query.length) {
123118

124-
callback();
119+
return callback();
125120

126-
},
127-
success(res) {
121+
} // end if;
128122

129-
selectize.savedItems = res;
123+
const __options = jQuery(options.el).data('__options');
130124

131-
callback(res);
125+
jQuery.ajax({
126+
// eslint-disable-next-line no-undef
127+
url: wu_selectizer.ajaxurl,
128+
type: 'POST',
129+
data: {
130+
...__options.data,
131+
query: {
132+
search: '*' + query + '*',
133+
},
134+
},
135+
error() {
132136

133-
},
134-
});
137+
callback();
135138

136-
},
137-
});
139+
},
140+
success(res) {
138141

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

141-
const selectize = select[0].selectize;
144+
callback(res);
142145

143-
/*
146+
},
147+
});
148+
149+
},
150+
});
151+
152+
jQuery(options.el).attr('data-init', 1);
153+
154+
const selectize = select[ 0 ].selectize;
155+
156+
/*
144157
* Makes sure this is reactive for vue
145158
*/
146-
selectize.on('change', function(value) {
159+
selectize.on('change', function(value) {
147160

148-
const input = jQuery(select[0]);
161+
const input = jQuery(select[ 0 ]);
149162

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

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

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

156-
} // end if;
169+
} // end if;
157170

158-
});
171+
});
159172

160-
selectize.on('item_add', function(value) {
173+
selectize.on('item_add', function(value) {
161174

162-
let active_item = {
163-
url: null,
164-
};
175+
let active_item = {
176+
url: null,
177+
};
165178

166-
jQuery.each(selectize.savedItems, function(index, item) {
179+
jQuery.each(selectize.savedItems, function(index, item) {
167180

168-
if (item.setting_id === value) {
181+
if (item.setting_id === value) {
169182

170-
active_item = item;
183+
active_item = item;
171184

172-
} // end if;
185+
} // end if;
173186

174-
});
187+
});
175188

176-
if (active_item.url) {
189+
if (active_item.url) {
177190

178-
window.location.href = active_item.url;
191+
window.location.href = active_item.url;
179192

180-
} // end if;
193+
} // end if;
181194

182-
});
195+
});
183196

184-
if (options.selected) {
197+
if (options.selected) {
185198

186-
selectize.options = [];
199+
selectize.options = [];
187200

188-
selectize.clearOptions();
201+
selectize.clearOptions();
189202

190-
const selected_values = _.isArray(options.selected) ? options.selected : [options.selected];
203+
const selected_values = _.isArray(options.selected) ? options.selected : [ options.selected ];
191204

192-
selectize.addOption(selected_values);
205+
selectize.addOption(selected_values);
193206

194-
const selected = _.isArray(options.selected) ? _.pluck(options.selected, options.valueField) : options.selected[options.valueField];
207+
const selected = _.isArray(options.selected) ? _.pluck(options.selected, options.valueField) : options.selected[ options.valueField ];
195208

196-
selectize.setValue(selected, false);
209+
selectize.setValue(selected, false);
197210

198-
} // end if;
211+
} // end if;
199212

200-
};
213+
};
201214

202215
}(jQuery));

‎assets/js/selectizer.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)