Use ajax to populate select2 only on open

How Do I...
#1

I’m using the following code to fetch options from a database and populate a select2 on open. It works pretty well, but as soon as I start typing in the select2 search input box it also searches via the same ajax function. How can I just populate every time it opens, but then leave it there as long as it’s opened?

Also since I’m using it to create tags I lost the ability to auto-select the new tag when I attached the ajax part, so instead of typing and pressing enter to add a tag, it’s now stuck in search-land and I have to click on the newly created tag manually if I want it to be selected.

Any ideas?

function formatMenu (data) {
  if (!data.id) { return data.text; }
  var $data = $(
    '<nobr>' + data.text + '</nobr>'
  );
  return $data;
};

$('select').select2({
    templateSelection: formatMenu,
    dropdownCssClass: 'select2-menu',
    dropdownParent: $('#parent'),
    placeholder: '-',
    tags: true,
    allowClear: true,
    ajax: {
        url: "?ajax=get_data,
        dataType: 'json',
        delay: 250,
        data: function (params) {
         return {
           searchTerm: params.term
         };
        },
        processResults: function (response) {
          return {
             results: response
          };
        },
        cache: false
    },
    sorter: function(data) {
        return data.sort(function (a, b) {
            a = a.text.toLowerCase();
            b = b.text.toLowerCase();
            if (a > b) {
                return 1;
            } else if (a < b) {
                return -1;
            }
            return 0;
        });
    },
    createTag: function (params) {
        return {
            id: params.term,
            text: params.term
        }
    }
});
#2

Don’t use the built-in AJAX capability of Select2. Instead, fetch your data first, before you initialize the Select2 widget, and pass the fetched data object when you initialize the Select2.

Alternatively, if you need to fetch new data every time the Select2 is opened (perhaps based on other user interactions in your application), you can write an event handler for the select2:open (or select2:opening) event, which will fetch the data and update the widget with that data.
Note that this will be slower, and you’ll probably need to show the user a wait indicator while the data is being fetched and loaded into the widget (and perhaps disable input into the search field).
Also note that, in my experience, updating the widget’s data while the dropdown is open does not update the dropdown’s display (even if you trigger the change.select2 event). The only solution I’ve found is to programmatically close and then reopen the dropdown, which looks messy. You could probably “cloak” the dropdown during this procedure (by setting its opacity to 0, for example). But in general, if you can, I would recommend pre-fetching the data before you initialize the Select2. And if you need to update its data, do so outside of any user interactions with the Select2 widget itself.