Jquery 如何限制select2中的字符

$("#customer_tag_ids").select2({
  maximumSelectionLength: 5,
  multiple: true,
  tags: true,
  tokenSeparators: [',', ' '],
  createTag: function(params) {
    let text = params.term;
    $('#warning-text').show();
    if (text.length <= 10) {
      $("#warning-text").text(`"${text}", is valid.. has ${text.length} characters`);
    } else {
      $("#warning-text").text(`"${text}", is invalid... has ${text.length} characters, permited max 10 characters
`);
      // return null to prevent create new tag
      return null;
    }

    if (params.term.match(/^(?![\d ])[a-z\d ]*$/i)) {
      // Return null to disable tag creation
      return {
        id: params.term,
        text: params.term,
        tag: true
      }
    } else {
      $("#warning-text").text(`"${text}", is invalid... it's doesn't match the pattern /^(?![\d ])[a-z\d ]*$/i
`);
    }
    return null;
  },
  language: {
    maximumSelected: function(e) {
      // return I18n.t('customers.alert.limit_max');
    },

    inputTooShort: function(e) {
      // return I18n.t('customers.alert.limit_min');
    },

    noResults: function() {
      // return I18n.t('customers.alert.not_result_found');
    }
  },
});

// Hide the warning text when open/close the dropdown
$("#customer_tag_ids").on("select2:open, select2:close", (e) => {
  $("#warning-text").hide();
})

<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.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<select id="customer_tag_ids" class="js-example-basic-single" name="state" style="width: 300px">
  <option value="text-1">Text 1</option>
  <option value="text-2">Text 2</option>
</select>

<div id="warning-text" style="margin-top: 50px">

</div>