如何避免重复标签？

Question

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

例：

php和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> 

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

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> 

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> 

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();
    }
});

似乎焦点是火两次.keyup也称为焦点事件。它是附加的方法。

Suggesion

追加vs html

使用html方法。你必须定义一个额外的div来保存那个动态内容。它不会连续。它不会依赖于方法调用的方法编号。

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

使用上面而不是下面的if（txt）$（“”，{text：txt.toLowerCase（），insertBefore：this}）;

参考1
参考2