टैग के डुप्लिकेशन से कैसे बचें?

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

आप टैग के मूल्यों है कि आप नए टैग तत्वों बनाने से पहले के खिलाफ जांच की एक सरणी बनाये रख सकता है। उपयोगकर्ता एक नकली टैग दर्ज करने की कोशिश करता है तो एक संदेश दिखाया गया है और यदि उपयोगकर्ता एक टैग को हटा या सफलतापूर्वक एक नए टैग कहते संदेश निकाल दिया जाता है:

$(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 2

कृपया इसे आज़माएं। यह सिर्फ यह जांचता है कि यह जोड़ने से पहले एक ही टैग मौजूद है या नहीं। यदि आप अन्य खंड में चाहते हैं तो आप त्रुटि संदेश भी जोड़ सकते हैं।

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

लगता है कि फोकसआउट दो बार आग लग रहा है। चीप फोकसआउट ईवेंट भी कॉल कर रहा है। ऐसा लगता है कि यह विधि की तरह संलग्न है।

Suggesion

संलग्न एचटीएमएल बनाम

उपयोग एचटीएमएल method.You यह अभ्यस्त concat.It घटना है कि विधि की विधि संख्या पर निर्भर नहीं होगा कि गतिशील content.It धारण करने के लिए एक अतिरिक्त div परिभाषित करने के लिए है सक्रिय किया गया। bellow के बजाय ऊपर

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

उपयोग करता है, तो (TXT) $ ("", { पाठ: txt.toLowerCase(), insertBefore: इस });

reference 1
reference 2