We Keep Coding

Selectize.js - how to know that an item selected came from "Add Item" instead of the preloaded options

I have this code.
$customer = $(".customer").selectize({
valueField: 'builder',
labelField: 'builder',
searchField: 'builder',
openOnFocus: true,
createOnBlur: true,
maxItems: 1,
create: function (input) {
newOption = true;
return {
builder: input,
value: input,
text: input,
};
},
render: {
option: function (item) {
return (
"<div class='selectize-item'>" +item.builder+ "</div>"
);
},
},
load: function (query, callback) {
if (!query.length) {
return callback();
}
$.ajax({
url: "/api/xxx/xxx",
type: "GET",
dataType: "json",
data: {...},
error: function () {
callback();
},
success: function (res) {
callback(res);
},
});
},
});
I've used selectize to a dropdown that allows users to add their own option. I believe this can be done through the create method.
My question here is how can I know that the user has added a new option instead of selecting the options that were pre-loaded. I am planning that if the user has added a new option I will make my variable newOption into true, while if the user has selected to the options that were pre-loaded, newOption will be false.
When I say "pre-loaded", this is an option that has been loaded through Ajax. You can see it on my load method that the dropdown options are loaded through Ajax.
Any help is greatly appreciated!

Select2 ajax: preselected data in edit mode

I'm making user profile page on Laravel and using select2 component to filter huge list of items.
I have a ajax-based select2. It's good when you are on /create page, but I need to have selected value in it, when I am on page /edit/1.
$('.search-filter-ajax').select2({
width: '100%',
minimumInputLength: 3,
placeholder: "Search...",
ajax: {
url: '/api/listing/search/',
data: function (term) {
return {
data: term.term
};
},
processResults: function (data) {
return {
results: $.map(data, function (item) {
return {
text: item.name,
search_from: item.name,
model: 'some_model',
id: item.id
}
})
};
},
dataType: 'json',
type: "GET",
delay: 250,
},
});
I tried to use initSelection function, but no luck, because it creates only select2 text elements, when I need real <option value="1"> something </option> component.
initSelection: function (element, callback) {
var id = $(element).data('select-id');
var text = $(element).data('select-text');
callback({ id: id, text: text });
},
How can I have a valid preselected option in select2 on page load, but still having opportunity to fire ajax call by onChange?

well, you could try to use your own logic to generate slect options like
$.ajax().then((res)=>{
$('#select').html('');
res.data.forEach((item)={$('#select').append($('option').text(item.text).value(item.value);)})
})

Set data of a Multiple Select2 element through javascript

I'm loading multiple values into a Select2 element through Javascript, ajax and jquery. While the data is loading properly and can be accessed once loaded, I'm unable to set stored data in the Select2 element.
Edit: I'm using Select2 v3.5.
My code:
HTML:
<input class="jsData" style="width: 100%" id="select2Data"></input>
Javascript:
$(".jsData").select2({
ajax: {
minimumInputLength: 4,
contentType: 'application/json',
url: '<%=Url.Action("GetData","Controller")%>',
type: 'POST',
dataType: 'json',
data: function (term) {
return {
sSearchTerm: term
};
},
results: function (data) {
return {
results: $.map(JSON.parse(data), function (item) {
return {
text: item.term,
slug: item.slug,
id: item.Id
}
})
};
}
},
multiple: true
});
So, this creates a Select2 element where I can traverse to and from a database and load data depending on what I've typed. I can also access the data (entered by the user) using the following line:
$('.jsData').select2('val')
The above line returns an array, which I can store in the database. My current objective is to set the stored data back into the Select2 element. Any help in this matter would be most welcome.
Update: A relevant link for what I want to accomplish:
https://select2.github.io/examples.html#programmatic
I want the example of setting multiple elements in Select2. However, the difference would be in the fact that the example in the Select2 documentation brings data at the time of loading the page, while I will be making trips to fetch the data.

The Select2 v3.5.4 docs are a bit confusing around this. I think there's a typo in the docs that's misleading.
First, notice that when I retrieve the data from the remote source I'm returning it as an object in the format of {id: ##, name: NAME}.
The first step is to add the initSelection parameter and pass the function to retrieve the previously selected items.
The next step, where I believe there's a typo, is to define the formatSelection parameter (not the formatResult it states in the docs). This function defines how the previously selected result is displayed. In this case I'm merely showing the name property of the result.
The formatResult parameter defines how newly selected options are displayed. You'll notice formatResult and formatSelection are the same below. I could have reused a single function but felt this was better for demonstration.
$(document).ready(function() {
function formatResult(data) {
return data.name;
};
function formatSelection(data) {
return data.name;
}
$(".jsData").select2({
ajax: {
minimumInputLength: 4,
url: "https://jsonplaceholder.typicode.com/users",
type: "GET",
dataType: "json",
results: function(data) {
return {
results: $.map(data, function(user) {
return {
name: user.name,
id: user.id
};
})
};
}
},
initSelection: function(element, callback) {
var id = $(element).val();
if (id !== "") {
$.ajax("https://jsonplaceholder.typicode.com/users/" + id, {
dataType: "json"
}).done(function(data) {
callback(data);
});
}
},
formatResult: formatResult,
formatSelection: formatSelection,
multiple: true
});
});
Here's the full working example:
$(document).ready(function() {
function formatResult(data) {
return data.name;
};
function formatSelection(data) {
return data.name;
}
$(".jsData").select2({
ajax: {
minimumInputLength: 4,
url: "https://jsonplaceholder.typicode.com/users",
type: "GET",
dataType: "json",
results: function(data) {
return {
results: $.map(data, function(user) {
return {
name: user.name,
id: user.id
};
})
};
}
},
initSelection: function(element, callback) {
var id = $(element).val();
if (id !== "") {
$.ajax("https://jsonplaceholder.typicode.com/users/" + id, {
dataType: "json"
}).done(function(data) {
callback(data);
});
}
},
formatResult: formatResult,
formatSelection: formatSelection,
multiple: true
});
});
.jsData {
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.css" rel="stylesheet"/>
<input class="jsData" style="width: 100%" id="select2Data" value="10"></input>

jQuery selectize load from external file not working

I have been struggling with this for hours and I cant understand what is not working.
I have an external JSON file airlines.json and I am trying to get selectize to populate the dropdown based on what they type.
Please help and point me in the right direction?
JavaScript:
var $select = $('#airline').selectize({
valueField: 'Airline',
labelField: 'Airline',
searchField: ['Airline'],
maxOptions: 10,
create: false,
render: {
option: function(item, escape) {
return '<div>' + escape(item.airline) + '</div>';
}
},
load: function(query, callback) {
if (!query.length) return callback();
$.ajax({
url: 'data/airlines.json', // + query,
type: 'POST',
dataType: 'json',
data: {
q: query,
maxresults: 5
},
error: function() {
callback();
},
success: function(res) {
callback(res);
}
});
}
});
HTML:
<select type="text" id="airline" name="airline" class="select-airline"></select>
JSON file (part)
[{"Airline":"Private flight"},
{"Airline":"135 Airways"},
{"Airline":"FlyPortugal"},
{"Airline":"FTI Fluggesellschaft"}]

selectize doesn't render inside dropdown

I'm trying to use selectize.js to populate a text box from a database based on user input, but it's not rendering inside the dropdown. I'm getting the correct data from the database, but not sure how to get it to render. Maybe the JSON isn't formed correctly?
Here's the JS:
var $select = $('#tags').selectize({
delimiter: ',',
persist: false,
valueField: 'PKID',
labelField: 'TAG',
searchField: ['TAG'],
maxOptions: 10,
create: true,
render: {
option: function (item, escape) {
return '<div>' + escape(item.TAG) + '</div>';
}
},
load: function (query, callback) {
if (!query.length) return callback();
$.ajax({
url: '/components/nl',
type: 'POST',
dataType: 'json',
data: {
method: 'getTags',
tag: query,
maxresults: 10
},
error: function () {
callback();
},
success: function (res) {
callback(res);
}
});
}
});
Here's the input box:
<input id="tags" class="selectize" type="text" name="tags" value="" placeholder="Tags separated by commas (optional)">
Here's what's being returned if the person starts to type in "straw".
{"COLUMNS":["PKID","TAG"],"DATA":[[1475,"strawberries"]]}
This is exactly what it should return, but not sure why I don't see "strawberries" as a choice in the dropdown. I only see "straw" which is what I have typed.

The problem was the code was expecting:
[{"PKID":1475,"TAG":"strawberries"}]
But I was giving it:
{"COLUMNS":["PKID","TAG"],"DATA":[[1475,"strawberries"]]}