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!

Multiple selectize - populate with value from database

In one page I have multiple selectize select with same name.
I can`t populate the selectize with value from database. (At the beginning the select is empty because I have 40k values in database).
This is a javascript code: (work only when I search in select)
$('.nume_medicament').selectize({
valueField: 'nume_medicament',
labelField: 'nume_medicament',
searchField: 'nume_medicament',
options: [],
create: false,
render: {
option: function(item, escape) {
return '<option datacod="'+item.cod_medicament+'" value="'+item.id_medicament+'">'+item.nume_medicament+'</option>';
},
},
load: function(query, callback) {
if (!query.length) return callback();
$.ajax({
url: site_url + "medicmed/get_medicamente_by_search",
type: 'GET',
dataType: 'json',
data: {
name: query,
},
error: function() {
callback();
},
success: function(res) {
callback(res);
}
});
},
});
And this is html file:
<select name="nume_medicament" class="nume_medicament checkmed selectizedefault">
<option selected datacod="<?=$pm->cod_medicament?>" value="<?=$pm->id_medicament?>"><?=$pm->nume_medicament?></option>
</select>
A want to assign the option when I enter in the page.
Thank you!!

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"}]

How to set Select2 value using initSelection?

I am using jQuery Select2 for dropdown lists. The data is loading via AJAX call using in JSON format.
Here is my script:
$("#sub_lessons").select2({
maximumSelectionSize: 1,
placeholder: "Select Sublessons",
allowClear: true,
multiple:true,
ajax: {
url: "getData.action?lid="+lessonid,
dataType: 'json',
data: function (term, page) {
return {
q: term
};
},
results: function (data, page) {
return { results: data };
}
}
});
My html snippet:
<input type="hidden" id="sub_lessons" style="width:300px"/>
When we clicking on the select2 box the data is loading perfectly,
but I have the function like setValue() when button is clicked.
<input type="button" onclick="setValue(1)"/>
And my function is:
function setValue(no)
{
$('#sub_lessons').select2('val',no);
}
But the value is not being set. I searched in some sites and suggested to use initselection.I used initselection,but it does not work.please help me how to set value to select2 when button is pressed.
any help would be appreciated.

try something like this
$('#sub_lessons').select2('val','no');

I try this; work for me. You should add this to initSelection select2:
initSelection: function (element, callback) {
var id = $(element).val();
$.ajax("url/" + id, {
dataType: "json"
}).done(function (data) {
var newOption = new Option(data.title, data.id, true, true);
$('#sub_lessons').append(newOption).trigger('change');
callback({"text": data.title, "id": data.id});
});
},

Another way to load remote data in Select2

I'm trying to get the remote using json from one php page,the JSON data:
[{"id":"0","name":"ABC"},{"id":"1","name":"DEF I"},{"id":"2","name":"GHI"}]
and the script is like this:
$(document).ready(function() {
$('#test').select2({
minimumInputLength: 1,
placeholder: 'Search',
ajax: {
dataType: "json",
url: "subject/data_json.php",
data: function (term, page) {// page is the one-based page number tracked by Select2
return {
college: "ABC", //search term
term: term
};
},
type: 'GET',
results: function (data) {
return {results: data};
}
},
formatResult: function(data) {
return "<div class='select2-user-result'>" + data.name + "</div>";
},
formatSelection: function(data) {
return data.name;
},
initSelection : function (element, callback) {
var elementText = $(element).attr('data-init-text');
callback({"name":elementText});
}
});
});
It works fine but it always reads the database whenever I typed one new character to search
. So i decided to use the another way (retrieve all data at first time and use select2 to search it):
$(document).ready(function() {
$("#test").select2({
createSearchChoice:function(term, data) {
if ($(data).filter(function() {
return this.text.localeCompare(term)===0; }).length===0) {
return {id:term, text:term};}
},
multiple: false,
data: [{"id":"0","text":"ABC"},{"id":"1","text":"DEF I"},{"id":"2","text":"GHI"}]
});
});
But the problem is how can I pass a request to data_json.php and retrieve data from it?
Say
data: $.ajax({
url: "subject/data_json.php",
data: function (term, page) {// page is the one-based page number tracked by Select2
return {
college: "ABC", //search term
};
}
dataType: "json",
success: function(data){
return data
}
}
But its not working, can anyone help?
Thanks

Why did you move away from your original code?
minimumInputLength: 1
Increase this and the search won't be called on the first character typed. Setting it to 3 for example will ensure the ajax call isn't made (and the database therefore not queried) until after the 3rd character is entered.

if I understood your question correctly you have data_json.php generating the options for select2 and you would like to load all of them once instead of having select2 run an ajax query each time the user inputs one or more characters in the search.
This is how I solved it in a similar case.
HTML:
<span id="mySelect"></span>
Javascript:
$(document).ready(function () {
$.ajax('/path/to/data_json.php', {
error: function (xhr, status, error) {
console.log(error);
},
success: function (response, status, xhr) {
$("#mySelect").select2({
data: response
});
}
});
});
I've found that the above does not work if you create a <select> element instead of a <span>.