I have a Flask application that creates a form which is then manipulated by html and JQuery. For a particular set of multi-select fields in the form, I'm attempting to make the dropdowns searchable using selectize.js. The order of the user's selections are important and the "drag and drop" plug in from selectize.js is exactly what I'm looking for. However, when I try implementing this logic, I'm not able to get the desired behavior in these form fields. The fields are not populating with the options, meaning there is no dropdown. Here is the relevant code snippet -
if (tableMetadata.length > 0) {
document.getElementById('displayErrorProd').innerHTML = "";
const options = tableMetadata; //can confirm this produces an array of the desired options
const items = options.map(x => x[0]); //can confirm this produces an array of the desired options
$("#prod_join_key").selectize({
plugins: ["drag_drop"],
options: options,
items: items,
valueField: options[0],
labelField: options[0],
delimiter: ",",
persist: false,
sortField: 'text',
create: function (input) {
return {
value: input,
text: input,
};
},
});
}
Please let me know if any other info is needed in order to debug this. Thanks for our help!