Search code examples
javascripthtmljqueryjquery-select2jquery-select2-4

Move the dynamic created tag to the bottom of the list in select2

I am using the create tag option in select2. However, I want to move the "new category" option to the bottom of the list instead of at the first.

$(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>

And, here is the screenshot enter image description here

Solution

  • You could use the sorter functionality of select2 and adding a one liner to resort your array

    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>