Bootstrap: v5.3.2
jquery: 3.7.1
Selectize: 0.15.2
When I input the first character, the following code will correctly fetch all units from server and render as options. But when I input the second key, it just filter the data which comes from last time. The options don't refresh with the second data from server. The console shows that there are exactly two time queries. How do I fix this? Thanks for any help.
let $unit_select = $('#unit').selectize({
valueField: 'UNIT_SN',
labelField: 'UNITN2',
searchField: 'UNITN2',
create: false,
persist: false,
openOnFocus: true,
maxItems: 1,
load: (query, callback) => {
unit_selectize.clearOptions();
console.log('lalalal');
this.clear();
if (!query.length) {
return callback();
}
$.ajax({
url: 'api/unit',
type: 'POST',
dataType: 'json',
data: {
query: query,
},
error: () => {
callback();
},
success: (res) => {
console.log(res);
if (res !== null && res.data) {
callback(res.data);
}
},
});
}
});
let unit_selectize = $unit_select[0].selectize;
unit_selectize.clear();