javascript - How do I preload values into a Select2 control and still search remote data? -

when preload values select2 dropdown, , expand control type in value. filters preloaded values. how configure select2 make ajax calls (new search) when type in text box? if don't preload values select2, ajax calls work. how can have both?

i preload select2 control this:

$.ajax({     type: "post",     contenttype: "application/json; charset=utf-8",     url: url,     data: json,     datatype: "json",     success: function (data, textstatus) {         var json = json.parse(data.d);         var arrdata = [];         if (json !== null && json !== undefined) {             if (json.length > 0) {                 $.each(json, function (index, element) {                     var item = { id: element.commonname, text: element.commonname, name: element.commonname };                     arrdata.push(item);                 });             }         }         $("[id$=ddldropdown]").select2({             data: arrdata         });     } }); 

i instantiate select2 control this:

$("[id$=ddldropdown]").select2({     ajax: {         url: url,         type: "post",         datatype: 'json',         async: true,         contenttype: "application/json; charset=utf-8",         delay: 500,         data: function (params) {                  var query = {                     searchstring: (params.term || ""),                     page: params.page                 }                 // query paramters ?search=[term]&page=[page]                 return json.stringify(query);           },         processresults: function (data, page) {             var json = json.parse(data.d);             if (json != null) {                 if (json.length > 0) {                     return {                         results: $.map(json, function (item) {                             return {                                 text: item.commonname,                                 name: item.commonname,                                 id: item.commonname                             }                         })                     };                 } else {                     return false;                 }             }             else {                 return false;             }          },         success: function (data, page) {             $("[id$=ddldropdown]").select2("data", data, true);         }     },     minimuminputlength: 2,     placeholder: "select value",     disabled: false,     cache: true });