Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save consatan/67f964d06bdaefdfb3f137c9a5699fb4 to your computer and use it in GitHub Desktop.
Save consatan/67f964d06bdaefdfb3f137c9a5699fb4 to your computer and use it in GitHub Desktop.
$.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
Copy link
Author

consatan commented Aug 11, 2018

example

<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