标签javascript设置最大值_Javascript_Html_Css

标签javascript设置最大值

javascript html css

标签javascript设置最大值,javascript,html,css,Javascript,Html,Css,我有一个JavaScript，我想添加最大标记选项为6，并且没有重复项。这是我到目前为止的代码 <div id="tags"> <span>php</span> <span>c++</span> <span>jquery</span> <input typ

我有一个JavaScript，我想添加最大标记选项为6，并且没有重复项。这是我到目前为止的代码

             <div id="tags">
                <span>php</span>
                <span>c++</span>
                <span>jquery</span>
                <input type="text" value="" placeholder="Add a tag" />
              </div>
<script>
$(function(){ // DOM ready    
  // ::: TAGS BOX    
  $("#tags input").on({
    focusout : function() {
      var txt= this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // allowed characters
      if(txt) $("<span/>",{text:txt.toLowerCase(), insertBefore:this});
      this.value="";
    },
    keyup : function(ev) {
      // if: comma|enter|space (delimit more keyCodes with | pipe)
      if(/(188|13|32)/.test(ev.which)) $(this).focusout();
    }
  });
  $('#tags').on('click', 'span', function() {
    if(confirm("Remove "+ $(this).text() +"?")) $(this).remove();
  });

});
</script>


php
C++
jquery
$（函数（）{//DOM就绪
//：：标签框
$（“#标记输入”）。在({
focusout:function（）{
var txt=this.value.replace（//[^a-z0-9\+\-\.\\\.\\\\.\\\\]/ig'，）；//允许的字符
if（txt）$（“”，{text:txt.toLowerCase（），insertBefore:this}）；
此。值=”；
},
键控：功能（ev）{
//if:逗号|输入|空格（用|管道分隔更多键码）
if（/（188 | 13 | 32）/.test（ev.which））$（this.focusout（）；
}
});
$（'#标记'）。在（'click'，'span'，function（）上{
如果（确认（“删除”+$（this.text（）+“？”））$（this.Remove（）；
});
});

我过去常这样做：

使用标记样式
不要重复
最多3个选择

代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Hello</title>
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
    <script>
      $(function () {
        $(".select2").select2({
          maximumSelectionLength: 3,
          width: 350
        });
      });
    </script>
  </head>
  <body>
    <select name="tags" id="tags" class="select2" multiple="multiple">
      <option value="PHP">PHP</option>
      <option value="CSS">CSS</option>
      <option value="CPP">C++</option>
      <option value="JavaScript">JavaScript</option>
    </select>
  </body>
</html>


PHP
CSS
C++
JavaScript

我过去常这样做：

使用标记样式
不要重复
最多3个选择

代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Hello</title>
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
    <script>
      $(function () {
        $(".select2").select2({
          maximumSelectionLength: 3,
          width: 350
        });
      });
    </script>
  </head>
  <body>
    <select name="tags" id="tags" class="select2" multiple="multiple">
      <option value="PHP">PHP</option>
      <option value="CSS">CSS</option>
      <option value="CPP">C++</option>
      <option value="JavaScript">JavaScript</option>
    </select>
  </body>
</html>


PHP
CSS
C++
JavaScript

Select2最好是对的。。。你为什么不用它？对不起什么看看这个。我还可以从使用它的数据库中得到建议吗？使用

$（“#tags span'）。length

来找出有多少个标记。如果是6，不要添加新标签。选择2更好，对。。。你为什么不用它？对不起什么看看这个。我还可以从使用它的数据库中得到建议吗？使用

$（“#tags span'）。length

来找出有多少个标记。如果是6，不要添加新标签。这很好：）：）当我必须加载时，这不是很慢吗？比如说2000多个

不在那里，我可以使用

像%

来查找使用Ajax和select2@craftx27嘿，

%%

可用。查看API。给我一些时间。没关系，我明白了这很好：）：）当我必须加载时，这不是很慢吗让我们假设2000多个

不在那里，我可以使用

像%

来查找使用Ajax的东西select2@craftx27嘿，

%%

可用。查看API。给我点时间，没关系，我明白了