jquery - Update select2 data without rebuilding the control -

i converting <input type="hidden"> select2 dropdown , feeding data through query method

$('#inputhidden').select2({     query: function( query ) {         query.callback( data ); // data in format select2 expects , works well..     ); }); 

the problem needed hack select2 ui , position 2 buttons on top of search bar that, when clicked, perform ajax calls , have update select2 content.

now, need updates occur without rebuilding select2 entirely rather refreshing items on dropdown. cannot find way pass new set of data created select2 control, possible ?

select2 v3.x

if have local array options (recieved ajax call), think should use data parameter function returning results select box:

var pills = [{id:0, text: "red"}, {id:1, text: "blue"}];   $('#selectpill').select2({     placeholder: "select pill",     data: function() { return {results: pills}; } });  $('#uppercase').click(function() {     $.each(pills, function(idx, val) {         pills[idx].text = val.text.touppercase();     }); }); $('#newresults').click(function() {     pills = [{id:0, text: "white"}, {id:1, text: "black"}]; }); 

fiddle: http://jsfiddle.net/rvnfn/576/

in case if customize select2 interface buttons, call updateresults (this method not allowed call outsite of select2 object can add allowedmethods array in select2 if need to) method after updateting data array(pills in example).

---

select2 v4: custom data adapter

custom data adapter additional updateoptions (its unclear why original arrayadapter lacks functionality) method can used dynamically update options list (all options in example):

$.fn.select2.amd.define('select2/data/customadapter',     ['select2/data/array', 'select2/utils'],     function (arrayadapter, utils) {         function customdataadapter ($element, options) {             customdataadapter.__super__.constructor.call(this, $element, options);         }         utils.extend(customdataadapter, arrayadapter);         customdataadapter.prototype.updateoptions = function (data) {             this.$element.find('option').remove(); // remove options             this.addoptions(this.converttooptions(data));         }                 return customdataadapter;     } );  var customadapter = $.fn.select2.amd.require('select2/data/customadapter');  var sel = $('select').select2({     dataadapter: customadapter,     data: pills });  $('#uppercase').click(function() {     $.each(pills, function(idx, val) {         pills[idx].text = val.text.touppercase();     });     sel.data('select2').dataadapter.updateoptions(pills); }); 

fiddle: https://jsfiddle.net/xu48n36c/1/

---

select2 v4: ajax transport function

in v4 can define custom transport method can work local data array (thx @caleb_kiage example, i've played without succes)

docs: https://select2.github.io/options.html#can-an-ajax-plugin-other-than-jqueryajax-be-used

select2 uses transport method defined in ajax.transport send requests api. default, transport method jquery.ajax can changed.

$('select').select2({     ajax: {         transport: function(params, success, failure) {             var items = pills;             // fitering if params.data.q available             if (params.data && params.data.q) {                 items = items.filter(function(item) {                     return new regexp(params.data.q).test(item.text);                 });             }             var promise = new promise(function(resolve, reject) {                 resolve({results: items});             });             promise.then(success);             promise.catch(failure);         }     } }); 

but method need change ids of options if text of option in array changes - internal select2 dom option element list did not modified. if id of option in array stay same - previous saved option displayed instead of updated array! not problem if array modified adding new items it - ok common cases.

fiddle: https://jsfiddle.net/xu48n36c/3/