выберите2 v3.x
Если у вас есть локальный массив с параметрами (полученный вызовом ajax), я думаю, вы должны использовать параметр data в качестве функции, возвращающей результаты для поля выбора:
var pills = [{id:0, text: "red"}, {id:1, text: "blue"}];
$('#selectpill').select2({
placeholder: "Select a pill",
data: function() { return {results: pills}; }
});
$('#uppercase').click(function() {
$.each(pills, function(idx, val) {
pills[idx].text = val.text.toUpperCase();
});
});
$('#newresults').click(function() {
pills = [{id:0, text: "white"}, {id:1, text: "black"}];
});
FIDDLE: http://jsfiddle.net/RVnfn/576/
В случае, если вы настраиваете интерфейс select2 с помощью кнопок, просто вызовите метод updateResults (этому методу нельзя вызывать из-за пределов объекта select2, но вы можете добавить его в массив allowedMethods в select2, если вам нужно) метод после обновления массива данных (например, таблетки) .
select2 v4: пользовательский адаптер данных
Пользовательский адаптер данных с дополнительным методом updateOptions (непонятно, почему оригинальный ArrayAdapter не имеет этой функциональности) может использоваться для динамического обновления списка опций (все опции в этом примере):
$.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.updateOptions = function (data) {
this.$element.find('option').remove(); // remove all options
this.addOptions(this.convertToOptions(data));
}
return CustomDataAdapter;
}
);
var customAdapter = $.fn.select2.amd.require('select2/data/customAdapter');
var sel = $('select').select2({
dataAdapter: customAdapter,
data: pills
});
$('#uppercase').click(function() {
$.each(pills, function(idx, val) {
pills[idx].text = val.text.toUpperCase();
});
sel.data('select2').dataAdapter.updateOptions(pills);
});
FIDDLE: https://jsfiddle.net/xu48n36c/1/
select2 v4: транспортная функция ajax
в v4 вы можете определить собственный метод транспорта, который может работать с локальным массивом данных (например, спасибо @Caleb_Kiage, я играл с ним без успеха)
документы: https://select2.github.io/options.html#can-an-ajax-plugin-other-than-jqueryajax-be-used
Select2 использует транспортный метод, определенный в ajax.transport, для отправки запросов к вашему API. По умолчанию этим транспортным методом является jQuery.ajax, но его можно изменить.
$('select').select2({
ajax: {
transport: function(params, success, failure) {
var items = pills;
// fitering if params.data.q available
if (params.data && params.data.q) {
items = items.filter(function(item) {
return new RegExp(params.data.q).test(item.text);
});
}
var promise = new Promise(function(resolve, reject) {
resolve({results: items});
});
promise.then(success);
promise.catch(failure);
}
}
});
НО с помощью этого метода вам нужно изменить идентификаторы опций, если текст опции в массиве изменяется - внутренний список элементов опции select2 dom не изменился. Если идентификатор опции в массиве останется прежним - будет отображаться предыдущая сохраненная опция, а не обновленная из массива! Это не проблема, если массив изменяется только путем добавления в него новых элементов - подходит для большинства распространенных случаев.
FIDDLE: https://jsfiddle.net/xu48n36c/3/
person
ndpu
schedule
27.06.2013
