#javascript #html #jquery #jquery-select2 #jquery-select2-4
#javascript #HTML #jquery #jquery-select2 #jquery-select2-4
Вопрос:
Я использую опцию создания тега в select2. Однако я хочу переместить опцию «новая категория» в нижнюю часть списка, а не в первую.
$(document).ready(function() {
$('.select2').select2({
escapeMarkup: function (markup) {
return markup;
},
templateResult: formatResult,
templateSelection: formatResult,
tags: true,
createTag: function (params) {
// Don't offset to create a tag if there is no @ symbol
if (params.term.match(/[a-z]/i)) {
// Return null to disable tag creation
return {
id: params.term,
text: params.term ' <span class="new-category-text">[New Category]</span>',
tag: true
}
}
return null;
},
matcher: matchCustom,
});
});
function matchCustom(params, data) {
// If there are no search terms, return all of the data
if ($.trim(params.term) === '') {
return data;
}
// Do not display the item if there is no 'text' property
if (typeof data.text === 'undefined') {
return null;
}
// `params.term` should be the term that is used for searching
// `data.text` is the text that is displayed for the data object
if (data.text.toUpperCase().indexOf(params.term.toUpperCase()) > -1) {
var modifiedData = $.extend({}, data, true);
// modifiedData.text = ' (matched)';
// You can return modified objects from here
// This includes matching the `children` how you want in nested data sets
return modifiedData;
}
// Return `null` if the term should not be displayed
return null;
}
function formatResult(state)
{
if (state.text === '-- Select --') {
return '<span class="text-danger">' state.text '</span>';
}
if (!state.id || !state.element) {
// console.log(state);
return state.text;
}
if(state.element.dataset.global === '1'){
// console.log(state);
return '<span>' state.text '</span><span class="float-right">Standard</span>';
}else{
return '<span>' state.text '</span>';
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.5/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.5/dist/js/select2.min.js"></script>
<div>
<select class="select2" style="width:200px;" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
Ответ №1:
Вы могли бы использовать sorter
функциональность select2
и добавить однострочник, чтобы использовать свой массив
for (var x in results) results[x].text.includes('[New Category]') ? results.push(results.splice(x, 1)[0]) : 0;
$(document).ready(function() {
$('.select2').select2({
escapeMarkup: function(markup) {
return markup;
},
templateResult: formatResult,
templateSelection: formatResult,
tags: true,
createTag: function(params) {
// Don't offset to create a tag if there is no @ symbol
if (params.term.match(/[a-z]/i)) {
// Return null to disable tag creation
return {
id: params.term,
text: params.term ' <span class="new-category-text">[New Category]</span>',
tag: true
}
}
return null;
},
matcher: matchCustom,
sorter: function(results) {
for (var x in results) results[x].text.includes('[New Category]') ? results.push(results.splice(x, 1)[0]) : 0;
return results;
},
});
});
function matchCustom(params, data) {
// If there are no search terms, return all of the data
if ($.trim(params.term) === '') {
return data;
}
// Do not display the item if there is no 'text' property
if (typeof data.text === 'undefined') {
return null;
}
// `params.term` should be the term that is used for searching
// `data.text` is the text that is displayed for the data object
if (data.text.toUpperCase().indexOf(params.term.toUpperCase()) > -1) {
var modifiedData = $.extend({}, data, true);
// modifiedData.text = ' (matched)';
// You can return modified objects from here
// This includes matching the `children` how you want in nested data sets
return modifiedData;
}
// Return `null` if the term should not be displayed
return null;
}
function formatResult(state) {
if (state.text === '-- Select --') {
return '<span class="text-danger">' state.text '</span>';
}
if (!state.id || !state.element) {
// console.log(state);
return state.text;
}
if (state.element.dataset.global === '1') {
// console.log(state);
return '<span>' state.text '</span><span class="float-right">Standard</span>';
} else {
return '<span>' state.text '</span>';
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.5/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.5/dist/js/select2.min.js"></script>
<div>
<select class="select2" style="width:200px;" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
Комментарии:
1. спасибо за ваш ответ. Не могли бы вы также подсказать, как я могу установить цвет фона для полного выпадающего списка, включая поле select2, а также показано на изображении. ibb.co/bBqTG6K
2. @SarojShrestha да, конечно, вот начало: jsfiddle.net/ct0hu4vz
3. Возможно, вы не сохранили свой код, в нем вообще нет ни одной строки CSS.
4. @SarojShrestha css добавляется с помощью jQuery.
5. извините, похоже, вы неправильно его интерпретировали. На самом деле, я говорил об этом сером цвете. Я хочу добавить цвет ко всем другим параметрам, как здесь ibb.co/DwfmNYn за исключением этого `[Новая категория]. Пожалуйста, проверьте исходное изображение, я говорил о серых параметрах.