Develop Reference

select2 won't show me results after transforming data into the required format

I use ajax call to fetch data from server and display the results via select2. The problem is that the fetched data is structured in a way that needs to be transformed for select2 to process it correctly.
When I transform data following their documentation, it won't show me the results.
The structure of the response:
{
type1: [{result1}, {result2}, {result3}...],
type2: [{result1}, {result2}, {result3}...],
type3: [{result1}, {result2}, {result3}...]
}
Select2 expects data to be: {"results": [{result1}, {result2}, {result3}...]}
My code:
function formatParent(parent) {
return parent.title || parent.text
}
Ember.$('#parent-select').select2({
ajax: {
url: '/api/parents/' + type,
headers: headers,
dataType: 'json',
data: function (params) {
let query = {
q: params.term,
}
return query;
},
processResults: function (data) {
const res = []
for (let property in data) {
if (data.hasOwnProperty(property)) {
res.push({
"text": property,
"children": data[property]
})
}
}
return res
}
},
width: 'resolve',
theme: 'bootstrap',
escapeMarkup: function (markup) {
return markup;
},
minimumInputLength: 1,
templateResult: formatParent,
templateSelection: formatParent
})
<select
data-tags="true"
data-placeholder={{placeholder}}
id="parent-select"
style="width: 100%;">
</select>
When I transform the data as presented below the results appear in the dropdown without any problems:
function formatParent(parent) {
return parent.title || parent.text
}
Ember.$('#parent-select').select2({
ajax: {
url: '/api/parents/' + type,
headers: headers,
dataType: 'json',
data: function (params) {
let query = {
q: params.term,
}
return query;
},
processResults: function (data) {
return {"results": data.type1}
}
},
width: 'resolve',
theme: 'bootstrap',
escapeMarkup: function (markup) {
return markup;
},
minimumInputLength: 1,
templateResult: formatParent,
templateSelection: formatParent
})

Select2 AJAX not showing "No data found" when no data in database, instead showing search parameter as option to select

I've been working on a project where I've to load select2 option from ajax call.
The code is working fine, except in search result, it always shows search parameter as option. Even if there is no data in database, it still showing it as option, not showing "No data found".
My code is here
$(".search_user").select2({
minimumInputLength: 11,
tags: [],
ajax: {
url: "/user/get_user",
dataType: 'json',
type: "GET",
quietMillis: 250,
data: function (term) {
return {
term: term
};
},
processResults: function (data) {
var Return = [];
for (var i in data.item) {
console.log(data.item[i])
if (data.item[i].id != data.item[i].text) {
Return.push(data.item[i]);
}
}
return {
results: Return
}
}
}
});
my return json is like this
{"item":[{"id":16,"name":"Razin Abid"}]}
My view is looking like this.
Please help me out.

If you using firemodal on stisla
$('#modal-create-promo').click(()=>{
setTimeout(()=>{
$('#fire-modal-1').removeAttr('tabindex');
});
});
$("#modal-create-promo").fireModal({
...
});
It's work for me

Thats because you enable tags option from select2. You need to remove 'Tags:[]' from your code.
visit : https://select2.org/tagging
so, your code should be like this:
$(".search_user").select2({
minimumInputLength: 11,
ajax: {
url: "/user/get_user",
dataType: 'json',
type: "GET",
quietMillis: 250,
data: function (term) {
return {
term: term
};
},
processResults: function (data) {
var Return = [];
for (var i in data.item) {
console.log(data.item[i])
if (data.item[i].id != data.item[i].text) {
Return.push(data.item[i]);
}
}
return {
results: Return
}
}
}
});

Change remote url based on search query

I have a select2 field which is retrieving data from a remote api. I can get that working. What I'm trying to do is change the remote url based on what the user has typed. If the first two letters typed are for example "AA" then search using a url and when the first two characters are "88" then search using another url.
This is my code so far:
this.selector.select2({
minimumInputLength: 2,
ajax: {
url: function(param){return 'http://localhost:3000/suggestions?&'},
dataType: 'json' ,
data: function (params) {
var query = {
search: params.term,
}
return query;
},
processResults: function(data) {
var results = [];
$.each(data, function (index, search) {
results.push({
id: search.id,
text: search.val
});
});
return {
"results":results
};
},
},
width: 'resolve',
});
I've looked but can't find an event which is fired when typing(searching).

According to docs the params argument passed to url callback is the same as in data callback. So you can rewrite your code as:
this.selector.select2({
minimumInputLength: 2,
ajax: {
url: function (params) {
var firstTwoLetters = params.term.slice(0, 2);
if (firstTwoLetters == '88') {
return 'some url';
} else if (firstTwoLetters == 'AA') {
return 'another url'
} else {
return 'http://localhost:3000/suggestions?&'
}
},
dataType: 'json',
data: function (params) {
var query = {
search: params.term,
}
return query;
},
processResults: function (data) {
var results = [];
$.each(data, function (index, search) {
results.push({
id: search.id,
text: search.val
});
});
return {
"results": results
};
},
},
width: 'resolve',
});

I hope I understood your last request correctly.
The oninput event occurs as you type.
note: I'd rather comment it and not use Answer, however, I have less than 50 rep.

How to use select2 plugin with php and ajax?

I am new to select2 plugin, my problem is,
I want to put a job search option to my web page that is when user queries with keyword php then it will return corresponding data as json. For example if user enters java then it will return most possible words like java, javascript, java.net and user can pick up one or more item from the list displayed.
i did but there is no select option
script
$(".load").select2({
minimumInputLength: 2,
ajax: {
url: "http://localhost/testserver/Test",
dataType: 'json',
type: "post",
data: function (term, page) {
return {
q: term
};
},
processResults: function (data, page) {
console.log(data);
return {
results: $.map(data, function (item) {
return {
text: item.Name,
}
})
};
}
},
});
html
<select class="load" style="width:400px;">

Find below Complete solution
$(document).ready(function() {
$(".load").select2({
minimumInputLength: 2,
ajax: {
url: "http://ip.jsontest.com/",
dataType: 'json',
type: "post",
data: function (term, page) {
return {
q: term
};
},
processResults: function (data, page) {
return {
results: $.map(data, function (item) { console.log(item);
return {
text: item
}
})
};
}
},
});
});
I have pointed url to some other location for dynamic data..Please make changes accordingly

select2 after refresh cannot be auto selected,initSelection and callback no working

[html]
<input style="width: 200px;" type = 'text' data-init-text = '$this->item_code' value = '$this->item_code' name = 'item_code' id = 'item_code' />
[javascript]
function itemCodeAutoComplete(){
$("#item_code").select2({
placeholder: "Search for a Item",
minimumInputLength: 1,
id : function(priv) {
return priv.code;
},
ajax: {
url: 'autocomplete.php?action=item&type=s&bpartner_id='+$('#bpartner_id').val()+"&category_id="+$('#category_id').val()+"&warehouse_id="+$('#warehouse_id').val(),
dataType: 'json',
quietMillis: 250,
data: function (term, page) {
return {
q: term, // search term
};
},
results: function (data, page) {
return { results: data.items };
}
},
initSelection: function(element, callback) {
var elementText = $(element).attr('data-init-text');
elementText = "test";
var data = [{id: elementText , text:elementText}];
callback(data);
},
formatResult: function(data) {
var markup = '<div class="row-fluid">' +
'<div class="span2" >'+data.label+'</div></div>';
return markup;
},
formatSelection: function(data){
$('#item_name').val(data.label_name);
$('#uom_id').val(data.label_uomid);
$('#unit_price').val(data.label_unitprice);
$('#item_id').val(data.id);
return data.value;
},
});
Cannot do a auto display text => "test" and also callback is not working.

`problem solve.
now i know callback(data); mean go to my formatSelection(data),
so inside data.value field need same with initSelection field
because formatselection return data.value; so in initSelection aslo need to set text become value
callback(data);
},`