Question

我正在尝试使用Select2 jquery插件进行AJAX调用。该查询似乎有效，但在.results()对象上调用options时会出现问题：

Uncaught TypeError: options.results is not a function

这是我的HTML：

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

这是我的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>'
  }
});

这是返回的JSON：

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

以下是失败的代码：

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);
    };
}

Answer 1

由于插件调用了results()，您还应该声明results: function (data, page)而不是processResults: function (data, page)。

Select2：Uncaught TypeError：options.results不是函数

1 个答案: