如何避免重復標簽？

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