Hello. I am struggling with the creation of a select2 searchbox. The searchbox is an address_lookup inspired field, called google_lookup. I do an ajax call to a REST api, I get the results, the results are displayed as options in the select2 searchbox, but I can not seem to figure out the name of the event that is triggered when I actually select an option.
The role of the searchbox would be to auto-fill the address fields, using google API. I tried select2:select, according to documentation https://select2.org/programmatic-control/events but it does not work.
I studied clients/base/fields/relate/relate.js to figure out what sugar is using, and there I did not found anything related but I found that instead of using select2:open they use select2-open. So I tried select2-select, but does not work.
Also when I open the searchbox AGAIN, the id (a hex string, that is what I need from my API and obtain correctly) is present in the searchbox, instead of the human readable address or ideally nothing. I tried to clear it using select2-open, the console log displays correct data but nothing happens with the searchbox. If I open the searchbox again, close the box, open again, the hex string is gone.
Relevant code:
({
_render:function()
{
this._super('_render');
var el=$('input[name="'+this.def.name+'"]');
var module_from_select=el.attr('data-source-origin');
//console.log("Module from select ==> "+module_from_select);
var url_link=app.api.buildURL("googlelookup/autocomplete/");
//console.log(url_link);
el.select2(
{
width:'100%',
minimumInputLength:2,
minimumResultsForSearch:Infinity,
allowClear:true,
debug:true,
ajax: {
quietMillis:500,
url: function (params) {
var real_link=url_link+params;
//console.log(real_link);
return real_link;
},
transport:function(params)
{
params.beforeSend=function(request)
{
request.setRequestHeader("OAuth-Token", SUGAR.App.api.getOAuthToken());
};
return $.ajax(params);
},
results:function(data, page)
{
//console.log(data);
return {results:data}; //correct values
},
processResults:function(data, params)
{
if(!params.page)
{
params.page=1;
}
//params.page = params.page || 1;
return {
results:data, pagination:{
more:(params.page*30)<data.total_count
}
};
}
}
}
);
el.on('select2-select',function(e)
{
console.log("The selection is : "+e); //never appears in console, select2:select, select2-select tried
});
el.on('select2-open',function(e)
{
console.log("Open select2, clear existing value => "+el.val()); //the hex string
el.val("");
console.log("After clear: "+el.val()); //nothing
});
}
})