¿Cómo puede JQuery saber si el valor dentro de la entrada es igual al valor dentro del lapso con el que se creó y se elimina el valor duplicado?
por ejemplo
<div id="tags-here" style="width: 100%;height: 150px;background-color: rgb(173, 199, 196);"> <input id="make-tags" type="text" class="animated-progress" style="background-color: white;"> </div>Solo he llegado hasta aquí y estoy perplejo. He buscado en google pero no he encontrado nada.
$("#make-tags").on("keyup",function(e){
var key = e.keyCode || e.wich, inpval = $("#make-tags").val(), va = $(".tag-span").val(), tinpval = $("#make-tags").text(), tva = $(".tag-span").text(); if(key === 188 ){ //comma preased var value = $(this).val().slice(0, -1); $("#tags-here").append("<span class='tag-span'><i class='fas fa-times'></i>" + value +"</span>") $(this).val(''); } $(".tag-span").each(function(){ if( inpval === tva){ console.log("yes") }else{ console.log("nono") } });El problema es que en su bucle .tag-span , está comparando el inpval actual con tva (que devuelve una cadena concatenada de todo el texto de span ), pero desea compararlo con el texto de cada .tag-span . . Entonces, en el ciclo, puede pasar el index y el item , para que pueda acceder a los valores de cada elemento en el ciclo:
$(".tag-span").each(function(index, item) { if (inpval === $(item).text()) { ... } }); Luego, si coincide, querrá realizar una acción y luego dejar de iterar con return false;
$("#make-tags").on("keyup", function(e) { var key = e.keyCode || e.wich, inpval = $("#make-tags").val(), va = $(".tag-span").val(), tinpval = $("#make-tags").text(), tva = $(".tag-span").text(); if (key === 188) { //comma preased var value = $(this).val().slice(0, -1); $("#tags-here").append("<span class='tag-span'><i class='fas fa-times'></i>" + value + "</span>") $(this).val(''); } $(".tag-span").each(function(index, item) { if (inpval === $(item).text()) { console.log("yes") // do something return false; } else { console.log("nono") } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="tags-here" style="width: 100%;height: 150px;background-color: rgb(173, 199, 196);"> <input id="make-tags" type="text" class="animated-progress" style="background-color: white;"> </div>