JQuery - No repetir valores en input

[metacortex]

Tengo un input tipo texto donde ya se encuentran unos valores separados por comas:

Código HTML:

value="1,2,3,4,5"
 

Por otra caja de texto vacía donde introduzco más valores y los adiciona al primer input luego de presionar un botón Agregar. Por ejemplo, si escribo 6,7,8 en el segundo input y luego hago clic en el botón, el primer input quedaría así:

Código HTML:

value="1,2,3,4,5,6,7,8"
 

Hasta ahí todo bien.

Mi duda es sobre cómo hacerle para que no se repitan valores, es decir, que si escribo 1,2,3,6 retorne false para los primeros números y true para 6. Imagino que es como una intersección de datos de ambos inputs pero ni idea sobre cómo proceder.

[alexg88]

Puedes crear una función que te realice la intersección y te devuelva el resultado:

Código Javascript:

function interseccion(texto1,texto2){
 
    
    array1 = texto1.split(",");
    
    $.each(texto2.split(","),function (ind,valor){
      if (array1.indexOf(valor)==-1)
       array1.push(valor);
    });
    alert("Nuevo array: "+array1);
    return array1.toString();
}
 
 
interseccion("2,3,4,5,6","3,5,6,7,6,5,3,5,1");
 

La función devuelve la cadena de texto sin datos repetidos

[masterpuppet]

Que tal metacortex,

La intersección serian los elementos comunes a los dos arrays, lo que tu quieres es un unique me parece, en cualquier caso jQuery no tiene prácticamente nada para el manejo de arrays, vas a tener que construirlo, de phpjs.org puedes obtener las funciones.

Una opción diferente a la que te comenta alexg88, seria hacer un concat de los arrays y luego aplicarle un array_unique.

Saludos.

[tredio]

puedes usar algo asi:

Código Javascript:

val = '1,2,3,4,5,6';
val2 = '6,1,2,7,8';
 
valores = val.split(',');
newValores = val2.split(',');
for(index in newValores){
    v = newValores[index];
    if(valores.indexOf(v) == -1){//si no se encuentra ese valor
        valores.push(v);
    }
}
val = valores.join(',');
console.log(val)//para que veas el resultado en la consola
 
EDITO: no habia visto el post anterior, esto es muy parecido a lo que ya te habian puesto por alla arriba ^^
 

[metacortex]

Qué buen enlace masterpuppet!! La analogía con PHP ayudará mucho a comprender mejor javascript. Creo que has reducido mi tiempo de aprendizaje a un tercio jejeje. Gracias hermano.

Respecto al .unique() así es, estuve intentando un buen rato con éste pero al final me decanté por la solución de alexg88, la cual me resulta bastante viable hasta el momento, ya que en la salida interseccion(...) puedo introducir los valores como strings. Gracias alexg88. De hecho pude ver varios ejemplos similares por ahí que hacen lo mismo, pero tu código es más pequeño y va más al grano .

El asunto es éste: se trata de un sortable hecho con JQuery UI. El problema que enfrentaba con los valores de ambos campos era que también debía refrescar el html y el contenido del input al pulsar el botón. Quedó 100% funcional, éste es el código resultante:

Código Javascript:

function interseccion( texto1 , texto2 ) {
        array1 = texto1.split(",");
 
        $.each(texto2.split(",") , function (ind , valor) {
            if (array1.indexOf(valor) == -1)
                array1.push(valor);
        });
 
    return array1; // le quité el toString porque lo necesito como un array
    }
 
 
    $("#agregar").click(function () {
        $( "#sortable" ).empty();
 
        var valor2 = '';
        var coco = interseccion($("#select-result").val() , $("#resultado-agregar").val());
 
        for (i = 0; i < coco.length; i++) {
            $( "#sortable" ).append('<li class="ui-state-default" id="widget-' + coco[i] + '">' + coco[i] + '<input type="checkbox" class="check" id="eliminar-' + coco[i] + '" /><\/li>');
 
            valor2 += coco[i];
 
            if (i < coco.length - 1) {
                valor2 += ',';
            }
        }
 
        $('#select-result').val(valor2);
    });
 

En el proyecto, el input viene con datos. Así que con el click les asigno un nuevo valor que reemplaza los existentes. Igual se destruye/reconstruye el html dentro de #sortable. Eso solucionó el problema.

Tredio, tienes razón, el código se parece al de alexg88. Pero es importante porque demuestra por dónde debe ir el asunto. Gracias hombre.

PD: Les paso karma mañana amigos! (Esta mañana agoté la cuota de hoy) Gracias por todo.

[masterpuppet]

No me refería a unique de jQuery(solo funciona con los elementos DOM), sino a implementar un unique, algo así(no recuerdo la fuente):

Código Javascript:

Array.prototype.unique = function() {
  var a = [];
  var l = this.length;
  for(var i = 0; i < l; i++) {
    for(var j = i + 1; j < l; j++) {
      if (this[i] === this[j])
        j = ++i;
      }
      a.push(this[i]);
    }
    return a;
}
 

Y podrías cachear los elementos antes del click, sino en cada click estas haciendo un traverse del DOM, tienes que tener en cuenta lo que significa el $, mira el for, estas haciendo un traverse en cada iteración, podrías hacer algo así:

Código Javascript:

//ready
var sortable = $('#sortable');
var select   = $('#select-result');
var add      = $('#resultado-agregar');
 
$("#agregar").click(function () {
 
    sortable.empty();
 
    var ids   = select.val().split(',').concat(add.val().split(',')).unique();
 
    for (var i = 0; i < ids.length; i++) {
        sortable.append('<li class="ui-state-default" id="widget-' + ids[i] + '">' + ids[i] + 
                        '<input type="checkbox" class="check" id="eliminar-' + ids[i] + '" ></li>');
    }
 
    select.val(ids.join(','));
 
});
 

Saludos.

[metacortex]

Iniciado por masterpuppet

No me refería a unique de jQuery(solo funciona con los elementos DOM), sino a implementar un unique, algo así(no recuerdo la fuente):

Ahh ahora entiendo jejej. Lo que pasa es que hablas con un nuevo en la materia. Leo "unique" y la neurona me dice "JQuery" =P

Efectivamente el código también cumple la tarea, con la diferencia de que cuando agregas valores existentes en el primer input, los reorganiza con el clic del botón.