Ответ 1
Что происходит:
По умолчанию, results объекта, который вы возвращаете в ajax.results, должен быть массивом в этой структуре [{id:1,text:"a"},{id:2,text:"b"}, ...].
results: function (data, page) {
var array = data.results; //depends on your JSON
return { results: array };
}
В Select2.js он фактически заявляет:
* @param options.results a function(remoteData, pageNumber, query) that converts data returned form the remote request to the format expected by Select2.
* The expected format is an object containing the following keys:
* results array of objects that will be used as choices
* more (optional) boolean indicating whether there are more results available
* Example: {results:[{id:1, text:'Red'},{id:2, text:'Blue'}], more:true}
Считывая исходный код, мы видим, что ajax.results вызывается при успешном выполнении AJAX:
success: function (data) {
// TODO - replace query.page with query so users have access to term, page, etc.
// added query as third paramter to keep backwards compatibility
var results = options.results(data, query.page, query);
query.callback(results);
}
Итак, ajax.results - это просто функция для форматирования ваших данных в соответствующую структуру (например, [{id:a,text:"a"},{id:b,text:"b"}, ...]) до передачи данных на query.callback:
callback: this.bind(function (data) {
// ignore a response if the select2 has been closed before it was received
if (!self.opened()) return;
self.opts.populateResults.call(this, results, data.results, {term: term, page: page, context:context});
self.postprocessResults(data, false, false);
if (data.more===true) {
more.detach().appendTo(results).html(self.opts.escapeMarkup(evaluate(self.opts.formatLoadMore, self.opts.element, page+1)));
window.setTimeout(function() { self.loadMoreIfNeeded(); }, 10);
} else {
more.remove();
}
self.positionDropdown();
self.resultsPage = page;
self.context = data.context;
this.opts.element.trigger({ type: "select2-loaded", items: data });
})});
И что в конце концов query.callback - это правильно настроить логику, чтобы все было нормально, когда вы выбираете один из элементов и запускаете .selectChoice.
selectChoice: function (choice) {
var selected = this.container.find(".select2-search-choice-focus");
if (selected.length && choice && choice[0] == selected[0]) {
} else {
if (selected.length) {
this.opts.element.trigger("choice-deselected", selected);
}
selected.removeClass("select2-search-choice-focus");
if (choice && choice.length) {
this.close();
choice.addClass("select2-search-choice-focus");
this.opts.element.trigger("choice-selected", choice);
}
}
}
Итак, если есть некоторая некорректная конфигурация (например, results не находится в правильной структуре), которая заставляет класс .select2-search-choice-focus не добавляться в элемент DOM до вызова .selectChoice, это происходит:
Выпадающее всплывающее окно остается открытым. Ничто не попадает в реальное поле. В консоли JavaScript нет ошибок. Как будто я ничего не нажал.
Решение
Существует много решений. Один из них, конечно же, выполняет манипуляции с массивами в ajax.results.
results: function (data, page) {
//data = { results:[{ItemId:1,ItemText:"a"},{ItemId:2,ItemText:"b"}] };
var array = data.results;
var i = 0;
while(i < array.length){
array[i]["id"] = array[i]['ItemId'];
array[i]["text"] = array[i]['ItemText'];
delete array[i]["ItemId"];
delete array[i]["ItemText"];
i++;
}
return { results: array };
}
Но вы можете спросить: почему идентификатор должен быть "id", а текст "text" в массиве?
[{id:1,text:"a"},{id:2,text:"b"}]
Может ли массив быть в этой структуре?
[{ItemId:1,ItemText:"a"},{ItemId:2,ItemText:"b"}]
Ответ: да. Вам просто нужно перезаписать функции id и text своими собственными функциями.
Вот оригинальные функции для .selecte2 в Select2.js:
id: function (e) { return e == undefined ? null : e.id; },
text: function (e) {
if (e && this.data && this.data.text) {
if ($.isFunction(this.data.text)) {
return this.data.text(e);
} else {
return e[this.data.text];
}
} else {
return e.text;
}
},
Чтобы перезаписать их, просто добавьте свои собственные функции внутри объекта, который вы проходите, в .selecte2:
$('#mySelect').select2({
id: function (item) { return item.ItemId },
text: function (item) { return item.ItemText }
......
});
Обновление
Что еще происходит:
Однако текст выбранного элемента не появляется в поле после закрытия списка.
Это означает, что .selectChoice успешно выполнен. Теперь проблема кроется в .updateSelection. В исходном коде:
updateSelection: function (data) {
var container=this.selection.find(".select2-chosen"), formatted, cssClass;
this.selection.data("select2-data", data);
container.empty();
if (data !== null) {
formatted=this.opts.formatSelection(data, container, this.opts.escapeMarkup);
}
if (formatted !== undefined) {
container.append(formatted);
}
cssClass=this.opts.formatSelectionCssClass(data, container);
if (cssClass !== undefined) {
container.addClass(cssClass);
}
this.selection.removeClass("select2-default");
if (this.opts.allowClear && this.getPlaceholder() !== undefined) {
this.container.addClass("select2-allowclear");
}
}
Отсюда видно, что перед тем, как соответствующая строка текста будет помещена во вход, она вызовет formatSelection.
formatSelection: function (data, container, escapeMarkup) {
return data ? escapeMarkup(this.text(data)) : undefined;
},
Обновление: решение
Раньше я думал, что this.text(data) может быть перезаписано с помощью text: funcion(item){ ... } в параметрах, но, к сожалению, это не работает.
Поэтому, чтобы правильно отобразить текст в поле, вы должны перезаписать formatSelection, выполнив
$('#mySelect').select2({
id: function (item) { return item.ItemId },
formatSelection: function (item) { return item.ItemText }
//......
});
вместо того, чтобы пытаться перезаписать text (который должен, предположительно, иметь такой же эффект, но этот способ перезаписи еще не поддерживается/реализован в библиотеке)
$('#mySelect').select2({
id: function (item) { return item.ItemId },
text: function (item) { return item.ItemText } //this will not work.
//......
});