How to disable caching of select2 search results?

I have two select2 containers, which work together side-by-side. Both are ajax based selects, and the selected value of one of them, determines the results in the other.

My problem is the following: when I select the first of the two select boxes, and open up the second one, it is prepopulated with the correct search results. Yet, when I change the first select, and then reopen the second one, for a split-second, while the ajax request is sent for the new data from the second select option, the results that were shown previously are still visible and selectable.

For a concrete example, imagine the following two select boxes: one is for occupation, and the other contains names of persons. The intended use case would be, is to select an occupation in the first one, and then the second one will only list the persons with that occupation. If I select, for example doctor as the occupation, and then list the second one with all the doctors I get the correct result. But if I then reselect the first one, and change it to engineer, and re-open the second one, I will get the list of doctors for a split-second, before the ajax manages the load my engineers. I can even select a doctor, as an engineer, if I am quick enough.

Is there a way to disable this behaviour? IE: whenever I click on an ajax related select2, show me an empty list, or the "Searching" string, while the request to the server is made, and an answer is returned?

Solution

Select2 "caches" options retrieved by ajax inside the options of the original tag. To disable cache as you say, remove all those options just before the new option gets selected.

In practice, removing options before or after does not make a difference in your problem, but if you were to have this same problem in a single select (not combining two as you mention), you should do this with the event 'select2:selecting', instead of 'select2:select' event (Select2 events)

$('#select-occupation').select2({
  ...,
  ajax: {
      ...
  }
})
.on('select2:selecting', function(event){
  console.log('actual value: ' + $(event.target).val());
  $('#select-people').find('option').remove();
});