Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
$.fn.select2.amd.define('select2/data/extended-ajax',['./ajax','../utils','jquery'], function(AjaxAdapter, Utils, $){
function ExtendedAjaxAdapter ($element,options) {
//we need explicitly process minimumInputLength value
//to decide should we use AjaxAdapter or return defaultResults,
//so it is impossible to use MinimumLength decorator here
this.minimumInputLength = options.get('minimumInputLength');
this.defaultResults = options.get('defaultResults');
ExtendedAjaxAdapter.__super__.constructor.call(this,$element,options);
}
Utils.Extend(ExtendedAjaxAdapter,AjaxAdapter);
//override original query function to support default results
var originQuery = AjaxAdapter.prototype.query;
ExtendedAjaxAdapter.prototype.query = function (params, callback) {
var defaultResults = (typeof this.defaultResults == 'function') ? this.defaultResults.call(this) : this.defaultResults;
if (defaultResults && defaultResults.length && (!params.term || params.term.length < this.minimumInputLength)){
var processedResults = this.processResults(defaultResults,params.term);
callback(processedResults);
}
else {
originQuery.call(this, params, callback);
}
};
return ExtendedAjaxAdapter;
});
@sajumani

This comment has been minimized.

Copy link

commented Nov 24, 2017

not working...

can i get complete working example...??

@vanpet

This comment has been minimized.

Copy link

commented Dec 21, 2017

Hi Stanislav,

this looks great but I think it blocks the creation of "tags" (when using the option "tags" : true on Select2). I'm not too sure where and how it fails. Do you have an idea?

@consatan

This comment has been minimized.

Copy link

commented Aug 11, 2018

@vanpet

just return a decorated dataAdapter

$.fn.select2.amd.define('select2/data/extended-ajax',['./ajax','./tags','../utils','jquery'], function(AjaxAdapter, Tags, Utils, $){
  // ... no modify
  return Utils.Decorate(ExtendedAjaxAdapter, Tags);
});

full code

$.fn.select2.amd.define('select2/data/extended-ajax',['./ajax', './tags', '../utils', 'module', 'jquery'], function(AjaxAdapter, Tags, Utils, module, $) {
  function ExtendedAjaxAdapter ($element,options) {
    //we need explicitly process minimumInputLength value 
    //to decide should we use AjaxAdapter or return defaultResults,
    //so it is impossible to use MinimumLength decorator here
    this.minimumInputLength = options.get('minimumInputLength');
    this.defaultResults     = options.get('defaultResults');

    ExtendedAjaxAdapter.__super__.constructor.call(this,$element,options);
  }

  Utils.Extend(ExtendedAjaxAdapter,AjaxAdapter);
  
  //override original query function to support default results
  var originQuery = AjaxAdapter.prototype.query;

  ExtendedAjaxAdapter.prototype.query = function (params, callback) {
    var defaultResults = (typeof this.defaultResults == 'function') ? this.defaultResults.call(this) : this.defaultResults;
    if (defaultResults && defaultResults.length && (!params.term || params.term.length < this.minimumInputLength)) {
      var processedResults = this.processResults(defaultResults,params.term);
      callback(processedResults);
    } else {
      originQuery.call(this, params, callback);
    }
  };

  if (module.config().tags) {
    return Utils.Decorate(ExtendedAjaxAdapter, Tags);
  } else {
    return ExtendedAjaxAdapter;
  }
});
@consatan

This comment has been minimized.

Copy link

commented Aug 11, 2018

@sajumani

base at my previous comment's full code

<script src="/js/select2.full.js"></script>
<script src="/js/select2_extended_ajax_adapter.js"></script>
<select id="myselect"></select>
<script>
(function() {
  $.fn.select2.amd.require.config({
    config: {
      'select2/data/extended-ajax': {
        tags: true
      }
    }
  });

  $('#myselect').select2({
    dataAdapter: $.fn.select2.amd.require('select2/data/extended-ajax'),
    defaultResults: [
      {id: 1, text: 'default_options_1'},
      {id: 2, text: 'default_options_2'},
      {id: 3, text: 'default_options_3'}
    ],
    tags: true,
    ajax: {
      // your ajax options
    }
  });
})();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.