4

Estoy desarrollando un sistema de gestionar productos y publicar productos desde CMS pero quiero darle este último toque final al sistema CMS un simple sistema de etiquetas.

Este es un sistema de etiquetas sencillo desarrollado con jQuery cada palabra separada por una coma se convierte en una etiqueta. Ejemplos: php, jquery, etc.

Si añado dos palabras iguales, se añaden sin problema. ¿Cómo evitar la duplicación de etiquetas?

introducir la descripción de la imagen aquí

Aquellas etiquetas generan este código html.

<span>php</span>
<span>jquery</span>

Quiero controlar qué etiquetas se pueden añadir, para ello se necesita que este sistema simple requiera de una base de datos donde se almacene que etiquetas solo podrán seleccionarse.

Ejemplo

id   tags
 1    php
 2  jQuery

Para ende así evitar etiquetas por ejemplo hola, ajdjj, etc.

Formulando una pregunta en SO en ingles de cómo rescatar los valores de las etiquetas para insertar los datos a la base de dato me dieron esta solución:

var tags = '';
$('#tags > span').each(function() {
    tags = tags + $(this).html() + ',';
});
$('#inputInForm').val(tags);

Quizás esta pregunta salga fuera del tema SO.

A pesar de tener conocimientos en php y mysqli se me complica a la hora de mezclar programación con jQuery. Pero soy rudo en mezclar php y mysqli con jQuery, no se cómo emplearlo. ¿Me pueden ayudar con un ejemplo sencillo para completar este sistema de tags básico?

No necesito un sistema completo, solo necesito un pequeño ejemplo de como emplearlo.

$(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">
  <span>jquery</span>
  <input type="text" value="" placeholder="Add a tag" />
</div>

1
  • ¿Hay algún motivo por el cuál no quieras usar soluciones existentes de manejo de tags?
    – El Asiduo
    el 3 sep. 2016 a las 3:48

4 respuestas 4

6
+50

Para tu caso se me ocurrió lo siguiente, primero tener una función que se encargará de guardar en un array global los tags agregados por el usuario.

function agregar_tags(tag, arrtags){
  var index = -1;
  var resultado = control_tags(tag, arrtags);

  for(var i = 0; i < arrtags.length; i++) {
    if(arrtags[i] === tag) {
      index = i;
    }
  }

  if(index > -1) {
    arrtags[index] = tag;
  }else {
    arrtags.push(tag);
  }

  return resultado;

}

La función llamada "agregar_tags" recibe como parámetros: tag (el tag escrito por el usuario que desea ingresar) y arrtags (array global que guarda los tags escritos por el usuario). Esta función se encarga de guardar sin repetir en el array global los tags escritos por el usuario. Gracias a esta función evitamos que el usuario ingrese tags repetidos. La función anterior la adapte del siguiente ejemplo : Array unico en javascript

Bueno como vemos, dentro de la función "agregar_tags" llamamos a otra llamada "control_tags", esta se encarga de agregar solo los tags guardados en la base de datos, comparando si el tag se encuentra dentro del array que guarda los tags provenientes de la base de datos.

function control_tags(needle, haystack) {
 var length = haystack.length;

 for(var i = 0; i < length; i++) {
    if(typeof haystack[i] == 'object') {
        if(arrayCompare(haystack[i], needle)) return true;
    } else {
        if(haystack[i] == needle) return true;
    }
 }

 return false;

}

control_tags retorna true si el tag ingresado por el usuario se encuentra en el array de tags proveniente de la base de datos, de lo contrario retorna false si el tag no es de los guardados en la base de datos. Con esto evitamos que los usuarios ingresen tags que no son los permitidos. La función control_tags es muy util porque es como un in_array de PHP pero adaptado a Javascript.

Por lo tanto se deben crear dos arrays globales, uno que ya de entrada guarde los tags provenientes de la base de datos y otro array para guardar los tags agregados por el usuario. El array que guarda los tags de la base de datos quedaría asi:

var arr_db = ["html", "css", "jquery", "javascript", "php"];
var usuario_tags = [];

Y tu código de tags quedaría asi:

$("#tags input").on({
  focusout : function() {
    var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // allowed characters
    // Aqui agregamos los tags escrito por el usuario y los cuales quiere agregar
    var control = agregar_tags(txt.toLowerCase(), usuario_tags);

    // Lo siguiente verifica que el tag ingresado sea de los permitidos en base de datos
    var verifica_tags = control_tags(txt.toLowerCase(), arr_db);


  // control debe retornar false con esto evitamos que se inserten tags repetidos
 // verifica_tags debe retornar true, esto quiere decir que el tag esta guardado en la base de datos
  if(txt && control == false && verifica_tags == true) {
    $("<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(); 
}

});

Como cargar los tags de la base de datos en el array arr_db? se me ocurre por ajax, del lado de PHP haces la consulta correspondiente retornas un json, y en javascript lo recorres con un for y con arr_db.push(returnedData[i]) vas guardando los tags en el array.

Ejemplo básico de consulta a base de datos en PHP y retorno de json con todos los tags guardados :

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "tagsdb";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
 die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT nombre FROM tags";
$result = $conn->query($sql);
$arr = array();
$i = 0;

if ($result->num_rows > 0) {
  // output data of each row
  while($row = $result->fetch_assoc()) {
    $arr[$i] = strtolower($row['nombre']);
    $i++;
  }
} 

echo json_encode($arr);
$conn->close();

Ejemplo con ajax para cargar los tags de la base de datos en el array global:

  $.ajax({
    url: 'tags.php',
    success: function(result)
    {
        var returnedData = JSON.parse(result);
        var total = returnedData.length;

        for(var i = 0; i < total; i++){
            arr_db.push(returnedData[i]);
        }
     }
  });

Por último en el siguiente bloque debes agregar lo siguiente :

$('#tags').on('click', 'span', function() {
 $(this).remove(); 

 quitar_tags(usuario_tags, $(this).text());
});

quitar_tags es una función que se encarga de quitar los tags del array global, que guarda los tags seleccionados por el usuario, cuando este realiza la acción de quitar un tag. Fuente :Quitar elementos de un array

function quitar_tags(array, element) {
 const index = array.indexOf(element);
 array.splice(index, 1);
}

Espero que esta guía te ayude y a todos que pasen por algo similar. Saludos!

3
  • Sobre tu duda, se me ocurre mediante ajax. En tag.php generas la consulta necesaria a la base de datos y guardas en un json los tags disponibles. Este json lo retornas en el success de ajax, y lo recorres con un for, y por cada tag lo guardas en el array global. Es la única forma que se me ocurrió, quizás a ti se te ocurre algo mejor. Agregue en mi respuesta el ejemplo en PHP y también como seria en ajax. el 4 sep. 2016 a las 17:37
  • Aquí te paso el código ordenado : jsfiddle.net/tftz375q el 5 sep. 2016 a las 0:37
  • El sistema funciona muy bien amiga, aunque aún falta unos pequeños detalles no se mucho algo basico de jquery me especializo más nativamente en php/mysqli plantee una nueva pregunta sobre este mismo tema pero que mejor que ud que conoce muy bien como esta planteado el código y el sistema espero puedas observar la pregunta y me puedas ayudar con el pequeño problema gracias saludos :)
    – Otto
    el 17 sep. 2016 a las 19:51
2

Yo haría algo así el JS:

var tags = new Tags('#tags input','http://localhost/newTagAjax.php')

jQuery("#tags input").on('keydown', function(ev) {
    if(ev.which === 13) {
        tags.add()
    }
})

function Tags(id,addURL){
    this.id = id
    this.addURL = addURL
}

Tags.prototype.add = function () {
    var _this = this
    var newTag = $(_this.id).val()
    $.post(this.addURL, {tag:newTag}, function( data ) {

        if( data.res) {
            //Aquí colocas tu código JS si es correcto
        }
        //Podrías usar este plugin
        $.notify({message: data.message})
    },"json")

}

Y el PHP lo haría algo así:

if ( !empty($_POST['tag']) ) {
    //Una clase que debes crear
    $db = new DBConnect();
    $id_tag = $db->add($_POST['tag']);
    $res= array(
        'res' => true,
        'id' => $id_tag,
        'message' => 'Tag añadida a la DB'
    );
    echo json_encode($res);
    exit();
}
$res= array(
    'res' => false,
    'message' => 'Error al añadir el tag a la DB'
);
echo json_encode($res);
exit();
0
1

$(function(){// DOM ready
			// ::: TAGS BOX
  var arr_php = [ "COMIDA", "HAMBRE", "TENEDOR", "MORIR" ]; //ARRAY CARGADO CON PHP
  var arr_temp=[];
  $("#tags input").on({
    focusout : function() {
	  var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,'');
	  if(jQuery.inArray(txt, arr_php) !== -1){
	    if(jQuery.inArray(txt.toLowerCase(), arr_temp)=== -1){
		  $("<span/>", {text:txt.toLowerCase(), insertBefore:this});
		  arr_temp.push(txt.toLowerCase());
	    }
	  }
	  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(); 
  });

		});
<style>
      	#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;
		}
    </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tags">
	  <span>jquery</span>
	  <input type="text" value="" placeholder="Add a tag" />
	</div>

Primero cargas el contenido de un array con PHP, este contenido lo puedes extraer de una base de datos con MySql

var arr_php = [<?php echo '"OK","COMIDA","HAMBRE","MORIR"'; ?>];
var arr_temp=[];

Entonces ahora tienes que consultar si la palabra ingresada existe en el array cargado desde PHP if(jQuery.inArray(txt, arr_php) !== -1)

En tu código reemplazas:

focusout : function() {
      var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // allowed characters
      if(txt) $("<span/>", {text:txt.toLowerCase(), insertBefore:this});
      this.value = "";
    },

por:

focusout : function() {
      var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,'');
      if(jQuery.inArray(txt, arr_php) !== -1){
        if(jQuery.inArray(txt.toLowerCase(), arr_temp)=== -1){
          $("<span/>", {text:txt.toLowerCase(), insertBefore:this});
          arr_temp.push(txt.toLowerCase());
        }
      }
      this.value = "";
    },
1
  • Olvidé que no repita la palabra! entonces el 8 sep. 2016 a las 14:40
0

Existen muchos plugins para jQuery para agregar etiquetas a las formas.

jQuery autocomplete tagging plug-in like StackOverflow's input tags?

No se si estés utilizando algún framework, pero conozco algunos que te permiten agregar contenido a ciertas "zonas" en forma de bloques. Twig por ejemplo te permite hacer algo como:

<?= block 'inline_javascript' do ?>
<script src="..."></script>
<script>
;(function ($) {
    // ...
})(jQuery)
</script>
<? end ?>
# Después imprimes el contenido del bloque `inline_javascript`
<html>
    </head>
    </head>
</html>
<body>
    <?= yield('inline_javascript') ?>
</body>
</html>

No recuerdo si es así es la sintaxis.

El punto es que en esos bloques podrías incluir tu arreglo de etiquetas permitidas declarando una variable en JS, o bien implementar un helper que imprima la implementación del plugin completamente, solo indicándole tal vez el nombre del campo, las etiquetas permitidas, etc.

Puedes serializar tu objeto a un objeto JSON que puedes consumir desde JavaScript:

<?php
$allowed = array('tag1', 'tag2', 'tag3', ...);
$allowedTags = json_encode($allowed);
?>

Venga de donde venga el arreglo de tags, ya sea de la base de datos o de donde sea, puedes serializar el arreglo a JSON y poner el contenido de la variable $allowedTags (un objeto JSON) en una variable de JavaScript.

Tienes que tener especial cuidado con los caracteres latinos, por ejemplo. También manejar correctamente las comillas de las llaves del objeto JSON.

json_encode

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.