Я использую jquery-select2-4 для поиска внешней базы данных и предоставления пользователю результатов поиска, которые он может выбрать.
У меня рабочая версия, работающая на этом jsfiddle.
Но если, например, возвращается только 1 результат поиска, я хочу пропустить весь процесс выбора и просто добавить возвращаемый результат поиска в список выбранных параметров. В соответствии с select2 docs я могу добавить новый вариант:
option = new Option("Sample text", "123", true, true);
select2_element.append(option);
select2_element.trigger('change');
Это, похоже, работает в некоторой степени. Но есть несколько проблем.
- Я не могу очистить поле поиска при добавлении опции.
- Я не могу добавить ничего, что
id
иtext
. - Добавленная опция отображается пользователю как
undefined
.
Я понимаю, что этот вопрос содержит 3 грани, но все 3 грани, вероятно, обращаются к этому 1 вопросу:
Как вы программно добавляете новый параметр jquery-select2-4 и reset в поле поиска?
Для вашей справки это контекст кода, о котором я спрашиваю:
var formatRepo, formatRepoSelection, selectRepos;
formatRepoSelection = function(element) {
return element.name + ' ' + element.forks + ' ' + element.id;
};
formatRepo = function(element) {
var markup;
if (!element.loading) {
return markup = element.name + ' ' + element.id;
}
};
selectRepos = function() {
var option, select2_element;
select2_element = $('#select2_element');
select2_element.select2({
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
data: function (params) {
return {
q: params.term,
page: params.page
};
},
processResults: function (data, params) {
if (data.items.length === 1) {
// START: The code I am asking about.
// Add the search result directly as an option.
option = new Option("Sample text", "123", true, true);
select2_element.append(option);
return select2_element.trigger('change');
// END: The code I am asking about.
} else {
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
}
},
cache: true
},
escapeMarkup: function(markup) {
return markup;
},
templateResult: formatRepo,
templateSelection: formatRepoSelection
});
};
$(function() {
return selectRepos();
});