Select2 AJAX includes change event, retrieving JS object result, passing additional parameters to server
$('#vendor').select2({
allowClear: true,
ajax: {
delay: 250,
url: '/purchasing/vendor-search',
dataType: 'json',
data: function (params) {
return {
divisionId: receivingDivision.val(),
term: params.term
}
},
processResults: function (response) {
// assume response is array of objects {vendorNumber: 1234567, vendorName: 'Acme Ind.'}, ...
for (let i = 0; i < response.length; i++) {
response[i].id = response[i].vendorNumber;
response[i].text = response[i].vendorNumber + ': ' + response[i].vendorName;
}
return {
results: response
};
}
},
minimumInputLength: 1
}).on('change', function(e) {
// Get newly selected value
let vendorNumber = e.currentTarget.value;
// Get JS object that was selected
// returns {vendorNumber: 1234567, vendorName: 'Acme Ind.'}
let vendor = $('#vendor').select2('data');
// Do other stuff like reload table
$('#openPurchaseOrders').DataTable().ajax.reload();
});