Can not search value and set initial value in select2 with xeditable.

[nayanhodar]

$('#' + id).editable({ type: 'select2', pk: 1, onblur: 'submit', emptytext: 'Empty', savenochange: true, select2: { placeholder: 'Select Country', //allowClear: true, width: '230px', autocomplete: true, //minimumInputLength: 2, id: function (e) { return e.Value; }, ajax: { url: '/MyController/GetCountryList?' + $("#querystring").val(), dataType: 'json', data: function (term, page) { return { query: term }; }, results: function (data, page) { return { results: data }; } }, formatResult: function (Country) { return Country.Text; }, formatSelection: function (Country) { return Country.Value; }, initSelection: function (element, callback) { return $.get('/MyController/GetCountryByCode', { query: element.val() }, function (data) { callback(data); }, 'json'); //added dataType } }, });

I can not select default value in select2 and search is not working inside select2.

My data is as below which is list of coutries in array with pair of Value and Text.

[{value: 'AF', text: 'Afghanistan - AF'},{value: 'AX', text: 'Aland - AX'},{value: 'AL', text: 'Albania - AL'},{value: 'DZ', text: 'Algeria - DZ'},{value: 'AS', text: 'American Samo - AS'},{value: 'AD', text: 'Andorra - AD'},{value: 'AO', text: 'Angola - AO'},{value: 'AI', text: 'Anguilla - AI'},{value: 'AG', text: 'Antigua and Barbuda - AG'},{value: 'AR', text: 'Argentina - AR'},{value: 'AM', text: 'Armenia - AM'},{value: 'AW', text: 'Aruba - AW'},{value: 'AC', text: ' Ascension - AC'}

In frontend i have set html like this <a class='TranValidation editable' name="SupplierParty.Country" id="SupplierParty_Country" data-value="@Model.SupplierParty.Country" >@Model.SupplierParty.Country</a>

Which should only show countrycode like below Country : DK

I want to only store value "DK" in my field and when i select from list it should be selected in select2.

Problem is i can not set inital value "DK" in select2 and i can see list of countries but can not search.

Please help asap