I am attempting to do an AJAX call with the Select2 jquery plugin. The query seems to be working, but the issue occurs when .results() is called on the options object:

Uncaught TypeError: options.results is not a function

Here is my HTML:

<input class="form-control" type="number" value="2125" name="topic_relation[source_topic_id]" id="topic_relation_source_topic_id" />

Here is my JS:

$(document).ready(function() {
  $('#topic_relation_source_topic_id').select2({
    minimumInputLength: 3,
    ajax: {
      url: "<%= grab_topics_path %>",
      dataType: 'json',
      delay: 250,
      data: function (term, page) {
        return {
          q: term, //search term
          page_limit: 30, // page size
          page: page, // page number
        };
      },
      processResults: function (data, page) {
        var more = (page * 30) < data.total;
        return {results: data.topics, more: more};
      }
    },
    formatResult: topicFormatResult,
    formatSelection: formatRepoSelection,
    escapeMarkup: function (m) { return m; }
  });
  function topicFormatResult(topic) {
    return topic.name
  }
  function formatRepoSelection(topic) {
    return '<option value="'+ topic.id +'">' + topic.name + '</option>'
  }
});

Here is the returned JSON:

{"total":2, "topics":[{"id":305,"name":"Educational Assessment, Testing, And Measurement"},{"id":3080,"name":"Inspectors, Testers, Sorters, Samplers, And Weighers"}]}

Here is the code which is failing:

function ajax(options) {
    var timeout, // current scheduled but not yet executed request
        handler = null,
        quietMillis = options.quietMillis || 100,
        ajaxUrl = options.url,
        self = this;

    return function (query) {
        window.clearTimeout(timeout);
        timeout = window.setTimeout(function () {
            var data = options.data, // ajax data function
                url = ajaxUrl, // ajax url string or function
                transport = options.transport || $.fn.select2.ajaxDefaults.transport,
                // deprecated - to be removed in 4.0  - use params instead
                deprecated = {
                    type: options.type || 'GET', // set type of request (GET or POST)
                    cache: options.cache || false,
                    jsonpCallback: options.jsonpCallback||undefined,
                    dataType: options.dataType||"json"
                },
                params = $.extend({}, $.fn.select2.ajaxDefaults.params, deprecated);

            data = data ? data.call(self, query.term, query.page, query.context) : null;
            url = (typeof url === 'function') ? url.call(self, query.term, query.page, query.context) : url;

            if (handler && typeof handler.abort === "function") { handler.abort(); }

            if (options.params) {
                if ($.isFunction(options.params)) {
                    $.extend(params, options.params.call(self));
                } else {
                    $.extend(params, options.params);
                }
            }

            $.extend(params, {
                url: url,
                dataType: options.dataType,
                data: data,
                success: function (data) {
                    ========> var results = options.results(data, query.page, query); <==========
                    query.callback(results);
                },
                error: function(jqXHR, textStatus, errorThrown){
                    var results = {
                        hasError: true,
                        jqXHR: jqXHR,
                        textStatus: textStatus,
                        errorThrown: errorThrown
                    };

                    query.callback(results);
                }
            });
            handler = transport.call(self, params);
        }, quietMillis);
    };
}

I am attempting to do an AJAX call with the Select2 jquery plugin. The query seems to be working, but the issue occurs when .results() is called on the options object:

Uncaught TypeError: options.results is not a function

Here is my HTML:

<input class="form-control" type="number" value="2125" name="topic_relation[source_topic_id]" id="topic_relation_source_topic_id" />

Here is my JS:

$(document).ready(function() {
  $('#topic_relation_source_topic_id').select2({
    minimumInputLength: 3,
    ajax: {
      url: "<%= grab_topics_path %>",
      dataType: 'json',
      delay: 250,
      data: function (term, page) {
        return {
          q: term, //search term
          page_limit: 30, // page size
          page: page, // page number
        };
      },
      processResults: function (data, page) {
        var more = (page * 30) < data.total;
        return {results: data.topics, more: more};
      }
    },
    formatResult: topicFormatResult,
    formatSelection: formatRepoSelection,
    escapeMarkup: function (m) { return m; }
  });
  function topicFormatResult(topic) {
    return topic.name
  }
  function formatRepoSelection(topic) {
    return '<option value="'+ topic.id +'">' + topic.name + '</option>'
  }
});

Here is the returned JSON:

{"total":2, "topics":[{"id":305,"name":"Educational Assessment, Testing, And Measurement"},{"id":3080,"name":"Inspectors, Testers, Sorters, Samplers, And Weighers"}]}

Here is the code which is failing:

function ajax(options) {
    var timeout, // current scheduled but not yet executed request
        handler = null,
        quietMillis = options.quietMillis || 100,
        ajaxUrl = options.url,
        self = this;

    return function (query) {
        window.clearTimeout(timeout);
        timeout = window.setTimeout(function () {
            var data = options.data, // ajax data function
                url = ajaxUrl, // ajax url string or function
                transport = options.transport || $.fn.select2.ajaxDefaults.transport,
                // deprecated - to be removed in 4.0  - use params instead
                deprecated = {
                    type: options.type || 'GET', // set type of request (GET or POST)
                    cache: options.cache || false,
                    jsonpCallback: options.jsonpCallback||undefined,
                    dataType: options.dataType||"json"
                },
                params = $.extend({}, $.fn.select2.ajaxDefaults.params, deprecated);

            data = data ? data.call(self, query.term, query.page, query.context) : null;
            url = (typeof url === 'function') ? url.call(self, query.term, query.page, query.context) : url;

            if (handler && typeof handler.abort === "function") { handler.abort(); }

            if (options.params) {
                if ($.isFunction(options.params)) {
                    $.extend(params, options.params.call(self));
                } else {
                    $.extend(params, options.params);
                }
            }

            $.extend(params, {
                url: url,
                dataType: options.dataType,
                data: data,
                success: function (data) {
                    ========> var results = options.results(data, query.page, query); <==========
                    query.callback(results);
                },
                error: function(jqXHR, textStatus, errorThrown){
                    var results = {
                        hasError: true,
                        jqXHR: jqXHR,
                        textStatus: textStatus,
                        errorThrown: errorThrown
                    };

                    query.callback(results);
                }
            });
            handler = transport.call(self, params);
        }, quietMillis);
    };
}

• javascript
• jquery
• jquery-select2

1 Answer 1

Since the plugin calls results(), you should also declare results: function (data, page) instead of processResults: function (data, page).