How to set an external link to open after clicking on the icon in the select2 input fields If the list of items is open, clicking on the link does not work, only the event select2: select. If the selected item already exists, then clicking on the link will open a new window but also a list of items, which is undesirable.
HTML
<div id="my_GEIS_div" class="container_form">
<select id="geis_select_form" data-id_carrier="3" class="branches">
<option value=""></option>
</select></div>
JS
var search;
var instance = new Mark(".select2-results");
var select_form = $("#geis_select_form");
var text_placeholder = 'Select .....';
select_form.select2({
ajax: {
url: 'ajax.php',
dataType: "json",
delay: 250,
data: function (params) {
search = params.term;
return {
action: 'getBranches',
q: params.term,
page: params.page,
country: 'CZ',
limit: 30
};
},
processResults: function (data, params) {
params.page = params.page || 0;
if(document.getElementById("count_GEIS") !== null)
$('#count_GEIS').html('('+ data.total_count +')');
else
$('span .select2-search--dropdown').append('<span id="count_GEIS">('+ data.total_count +')</span>');
return {
results: $.map(data.branches, function (item) {
return {
id: item.id,
idGP: item.idGP,
name: item.name,
city: item.city,
street: item.street,
postcode: item.postcode,
phone: item.phone,
mapUrl: item.mapUrl
}
}),
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
complete: function () {
if (search !== undefined) {
setTimeout(function () {
instance.mark(search);
}, 100);
}
}
},
width: '98%',
templateResult: function (data) {
return self.selectTemplate(data);
},
templateSelection: function (data) {
if (!data || data.id === '') {
return text_placeholder;
}
return selectTemplate(data);
}
})
.on({
'select2:select': function (e) {
//save data ......
}
});
Here is a working example: