如何避免标签重复？

Question

我有一个简单的标签框，问题是如果我添加相同的词汇，例如：

php, and php,

标签会重复显示相同的词汇。

代码已完成。

$(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 (delimit more keyCodes with | pipe)
      if(/(188|13)/.test(ev.which)) $(this).focusout(); 
    }
  });
  $('#tags').on('click', 'span', function() {
    $(this).remove(); 
  });

});

#tags{
  float:left;
  border:1px solid #ccc;
  padding:5px;
  font-family:Arial;
}
#tags > span{
  cursor:pointer;
  display:block;
  float:left;
  color:#fff;
  background:#789;
  padding:5px;
  padding-right:25px;
  margin:4px;
}
#tags > span:hover{
  opacity:0.7;
}
#tags > span:after{
 position:absolute;
 content:"×";
 border:1px solid;
 padding:2px 5px;
 margin-left:3px;
 font-size:11px;
}
#tags > input{
  background:#eee;
  border:0;
  margin:4px;
  padding:7px;
  width:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="tags">
  <input type="text" value="" placeholder="Add a tag" />
</div>

唯一的问题是标签（tags）的重复，需要添加相同的单词。

- user6792046

---

当用户尝试添加重复标签时，您希望发生什么？ - Calum

Answer 1

请尝试这个。它只是检查是否存在相同的标签，然后再添加。如果需要，您也可以在else子句中添加错误消息。

$(function(){ // DOM ready

  // ::: TAGS BOX

  $("#tags input").on({
    focusout : function() {
      var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // allowed characters
      if(txt && !$("#tags span:contains("+ txt.toLowerCase() +")").length) {
        
        $("<span/>", {text:txt.toLowerCase(), insertBefore:this});
        this.value = "";
      }
    },
    keyup : function(ev) {
      // if: comma|enter (delimit more keyCodes with | pipe)
      if(/(188|13)/.test(ev.which)) $(this).focusout(); 
    }
  });
  $('#tags').on('click', 'span', function() {
    $(this).remove(); 
  });

});

#tags{
  float:left;
  border:1px solid #ccc;
  padding:5px;
  font-family:Arial;
}
#tags > span{
  cursor:pointer;
  display:block;
  float:left;
  color:#fff;
  background:#789;
  padding:5px;
  padding-right:25px;
  margin:4px;
}
#tags > span:hover{
  opacity:0.7;
}
#tags > span:after{
 position:absolute;
 content:"×";
 border:1px solid;
 padding:2px 5px;
 margin-left:3px;
 font-size:11px;
}
#tags > input{
  background:#eee;
  border:0;
  margin:4px;
  padding:7px;
  width:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="tags">
  <input type="text" value="" placeholder="Add a tag" />
</div>

- Inanc Gumus

---

@Paul 你试过了吗？ - Inanc Gumus

完美的朋友。您可以在添加时包含一条消息，因此当您输入一个相等的标签时自动显示错误消息或警告。谢谢。 - user6792046

Answer 2

你可以维护一个标签值的数组，在创建新的标签元素之前检查它们。如果用户尝试输入重复的标签，则会显示一条消息，如果用户删除标签或成功添加新标签，则会删除该消息：

$(function() { // DOM ready

  // ::: TAGS BOX

  var tags = [];

  $("#tags input").on({
    focusout: function() {
      var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // allowed characters
      if (txt) {
        // Check if array contains value before creating span
        if ((tags.indexOf(txt) === -1)) {
          $('#message').hide();
          $("<span/>", {
            text: txt.toLowerCase(),
            insertBefore: this
          });
        } else {
          $('#message').show();
        }
      }
      tags.push(txt);
      this.value = "";
    },
    keyup: function(ev) {
      // if: comma|enter (delimit more keyCodes with | pipe)
      if (/(188|13)/.test(ev.which)) $(this).focusout();
    }
  });
  $('#tags').on('click', 'span', function() {
    var text = $(this).text();
    // Filter tag array on tag removal
    tags = tags.filter(function(e) {
      return e !== text;
    });
    $('#message').hide();
    $(this).remove();
  });
});

#tags {
  float: left;
  border: 1px solid #ccc;
  padding: 5px;
  font-family: Arial;
}
#tags > span {
  cursor: pointer;
  display: block;
  float: left;
  color: #fff;
  background: #789;
  padding: 5px;
  padding-right: 25px;
  margin: 4px;
}
#tags > span:hover {
  opacity: 0.7;
}
#tags > span:after {
  position: absolute;
  content: "×";
  border: 1px solid;
  padding: 2px 5px;
  margin-left: 3px;
  font-size: 11px;
}
#tags > input {
  background: #eee;
  border: 0;
  margin: 4px;
  padding: 7px;
  width: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="tags">
  <input type="text" value="" placeholder="Add a tag" />
</div>
<p id="message" style="display:none">You cannot create a duplicate tag.</p>

- Calum

---

完美的朋友。但是自动显示错误消息会更好还是手动更好？ - user6792046

@Paul，我已经更新了代码以包含一条消息，并更新了说明。您应该编辑您的问题以表明如果用户尝试添加重复项，则需要一条消息。 - Calum

谢谢朋友 :) - user6792046

我在同一个主题上有一个新的问题，请帮忙 :) - user6792046

Answer 3

问题

$("#tags input").on({
    focusout: function () {
        //append text(sugsession :Not use append process.Use html() like replace existing content method.)
    },
    keyup: function (ev) {
            ....$(this).focusout();
    }
});

看起来 focusout 事件会触发两次。keyup 事件也会调用 focusout 事件。似乎它是 append 方法的一种。

建议

append vs html

使用 html 方法。您必须定义一个额外的 div 来容纳动态内容。它不会连接。它不会依赖于调用该方法的次数。

$("#newDiv").html(txt.toLowerCase());

请使用上面的代码，而不是下面的代码 if (txt) $("", { text: txt.toLowerCase(), insertBefore: this });

参考文献1
参考文献2

- Sanka