将动态创建的标签移动到select2列表的底部

问题描述

我在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>

而且，这是屏幕截图

解决方法

您可以使用sorter的{​​{1}}功能并添加一个衬板来重新排列您的阵列

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>';
  }
}