chuk-shirley
2/9/2018 - 3:15 PM

Select2 AJAX

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();
});