Select2 default options with ajax

I have next html structure

<select class="change_item_dropdown_ajax form-control" id="item_id" name="item_id" onchange="updateData(this, this.value, 16)" >
<optgroup label="System Data">
  <option value="17">Test</option>
  <option selected="selected" value="18">System</option>
</optgroup>
</select>

Javascript

 $(".change_item_dropdown_ajax").select2({
        ajax: {
            url: "get_user_items",
            dataType: 'json',
            delay: 250,
            theme: "classic",
            data: function (params) {
                return {
                    q: { name_contains: params.term } // search term
                };
            },
            processResults: function (data) {
                return {
                    results: data
                };
            },
            cache: true
        },
        allowClear: true,
        placeholder: '--- Please select item ---',
        minimumInputLength: 1
    });

I want to make possibility for customer to see some default system options with items <optgroup label="System Data">, but also add ability to make search ajax queries by his own items.

However after binding select2 it doesn't show <optgroup label="System Data">...</optgroup>,

select2 options are empty and it only displays hint "Please enter 1 or more characters".

It's not even clear if it is possible to do, thanks.

Select-2 removes options when using ajax adapter.

UPD2 github issue https://github.com/select2/select2/issues/3828

Solution

If you want to have an <optgroup> which is always visible, regardless what the client searches for, and below that, in another <optgroup>, you want to see the search results, try this out:

In your server side script, where you are processing the search query the client typed in, you should return a json_encoded array with the items which you want to be displayed in the select box. Instead of this, try doing something like this:

** MODIFIED CODE PER YOUR REQUEST IN THE QUESTION COMMENT**

$q=$_REQUEST['q']; //the query string passed, note, that if you have minimumInputLength set, until that inputLength is reached, this part of the code won't run, so if you require the minimumInputLength, you should play with the templateResult option of select2
if (empty($q)) {
   $results=array();
   $result[0]=array(); //an optgroup to display when no query was sent
   $result[0]['text']='System Data';
   $result[0]['children']=array();
   // populate your first optgroup here, using the format which you are sending to select2.
} else {    
   $result[0]=array(); //an optgroup for results for the users searches
   $result[0]['text']='User results';
   $result[0]['children']=array();
   //populate the children array with the search related results
}

// json_encode the $result array, and return it

I am using a simmilar code, which works flawlesly at my side, but it is possible that some other things has to be set up before it will work(I wrote the code a few months ago, and I remember that I had a rather hard time figuring this out), if this approach doesn't work, notify me, and I will look into my code, to see how I did it exactly.