时间戳

首页 > 解决方案 > 防止 select2 的标签文本中出现空格

javascript - 防止 select2 的标签文本中出现空格

问题描述

我在 select2 中创建没有空格的标签时遇到了一些问题。当我按喜欢 tt 然后创建一个新标签时，如果我再次写 tt 它会阻止，但是当我按“tt tt”然后创建新标签时。我想防止两个 tt 和 tt 之间有空格。此标签中不允许有空格。我怎么能那样做？提前致谢。

代码

$(document).ready(function() {
      $("#pictures_tag_input").select2({
        tags: true,
        multiple: true,
        placeholder: "Please type here",
        maximumSelectionSize: 12,
        minimumInputLength: 2,
        tokenSeparators: [",", " "],
        createTag: function(params) {
          // empty string is not allow
          var term = $.trim(params.term);
          if (term === "") {
            return null;
          }
    
          // duplicate check
          var selectedTags = $("#pictures_tag_input").val() || [];
          if (selectedTags.indexOf(term) > -1) {
            return null;
          }
    
          return {
            id: term,
            text: term,
            newTag: true // add additional parameters
          };
        },
        templateResult: function(item) {
          return item.name || item.text;
        },
        templateSelection: function(item) {
          return item.name || item.text;
        },
        escapeMarkup: function(markup) {
          return markup;
        },
        ajax: {
          url: "https://api.myjson.com/bins/444cr",
          dataType: "json",
          global: false,
          cache: true,
          delay: 0,
          data: function(params) {
            return {
              q: params.term
            };
          },
          processResults: function(results, params) {
            // remove existing tag after key press
            var term = $.trim(params.term);
            var searchedTags = $.map(results, function(tag) {
              if (tag.text.match(term) || term === "")
                return { id: tag.id, text: tag.text };
            });
            return {
              results: searchedTags
            };
          } //end of process results
        } // end of ajax
      });
    });
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>


<div class="container">
  <form id="frm">
    <h1>Sample Form</h1>
    <div class="row">
      <div class="col-4">
        <div class="form-group">
          <label for="tagInput">Tag Input</label>
          <select class="form-control" id="pictures_tag_input"></select>
          <small class="form-text text-muted"><p class="text-info">1) no space in tag 2) create tag dynamically 3) prevent duplicate tag 4) search tag from ajax calling 5) tag create by enter, space and comma 6) at first dot, @ are not allow 7) sometimes tag popup position is not right placed.</p></small>
        </div>
      </div>
    </div>
  </form>
</div>

注意：select2 版本是 4.0.5

这是演示链接 https://codepen.io/mdshohlrana/pen/daVZNo?editors=1010

标签： javascriptjqueryajaxjquery-select2

解决方案

只需从标签中删除所有空格？

var term = $.trim(params.term).replace(/\s/g,'');

然后tt tt会变成tttt，其余的功能仍然有效。应用到您的 codepen：https ://codepen.io/anon/pen/zeRoOv?editors=1010

推荐阅读