我正在使用select2插件(v4),并使用ajax加载他的选项。 如果我第一次打开选择输入,将加载数据。当我再次打开选择时,将重新加载相同的数据。
有什么方法可以防止这种“重新加载”数据?我的意思是,如果我只是打开select2并且先前已加载选项,则我不想再次加载。
这是我当前的代码:
$(select_input).select2({ ajax: { url: url, dataType: 'json', quietMillis: 250, data: function (params) { return { term: params.term, page: params.page, page_limit: default_page_size }; }, processResults: function (data) { return { results: data.data, pagination: { more: (data.page * default_page_size) < data.count } }; }, cache: true }, escapeMarkup: function (markup) { return markup; }, minimumInputLength: 0, templateResult: formatTemplateResult, templateSelection: formatTemplateSelection });
由于您正在使用select2_v.4,因此必须使用data- adapters(query并且initSelection方法在V.4.0中已弃用)以下是custom-data- adapter通过名为方法使用的示例AMD-Pattern。我没有机会进行测试,但是我相信这会为您提供继续前进的方向。
data- adapters
query
initSelection
custom-data- adapter
AMD-Pattern
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" /> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script> <script> var cachedData; $.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.query = function (params, callback) { var retData; if (cachedData != undefined) // check if data existing in cachedData variable retData = cachedData; else { $.ajax({ url: url, dataType: 'json', quietMillis: 250, data: function (params) { return { term: params.term, page: params.page, page_limit: default_page_size }; }, success: function (data) { retData = { results: data.data, pagination: { more: (data.page * default_page_size) < data.count } }; cachedData = retData; // save the retData in a global variable }, error: function (er) { debugger; }, cache: true }); } callback(retData); }; return CustomDataAdapter; } ); $(document).ready(function () { var customAdapter = $.fn.select2.amd.require('select2/data/customAdapter'); $("#select1").select2({ tags: true, dataAdapter: customAdapter, escapeMarkup: function (markup) { return markup; }, minimumInputLength: 0, templateResult: formatTemplateResult, templateSelection: formatTemplateSelection }); }); </script>