Cómo crear un campo input ideal para introducir tags con jQuery, PHP y MySQL

Existen ciertos campos input que están preparados para convertir el texto introducido en tags y tokens cuando se pulsa una determinada tecla del teclado como la tecla ENTER o la coma. Esta función es muy fácil de utilizar ya que, de manera visual, indica al usuario cómo introducir la información, además de reemplazar al típico input de texto en el que se indicaba que se introdujera el contenido separado por comas. Los inputs para tags son ideales cuando necesitas almacenar múltiples detalles como habilidades, lenguajes de programación...

Por eso, en este tutorial te mostraremos cómo crear un campo input ideal para introducir tags con jQuery, PHP y MySQL. Para esta práctica utilizaremos esta estructura de ficheros:

  • index.php
  • save.php
  • custom_tags_input.js

Crea la tabla de la base de datos

En este ejemplo, guardaremos los datos introducir en el campo dentro de una tabla MySQL. Por eso, lo primero que haremos será crear la tabla developers en la base de datos para insertar dicha información.

CREATE TABLE `developers` (
`id` int(11) NOT NULL,
`name` varchar(255) NOT NULL,
`skills` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Incluye Bootstrap y su plugin Tags Input

Para este tutorial necesitaremos el plugin de Bootstrap Tags Input, así que tendremos que incluir la librería. Por supuesto, también tendremos que incluir todos los archivos relativos al plugin. Todo esto en el fichero index.php.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>
<script src="custom_tags_input.js"></script>

Crea el formulario con el campo input

Crearemos un formulario en el que incluiremos nuestro campo input para introducir tags. Para el layout, obviamente, utilizaremos Bootstrap y para definir nuestro campo, haremos usuo del parámetro data-role=”tagsinput”.

<div class="container">
<h2>Create Bootstrap Tags Input with jQuery, PHP & MySQL</h2>
<form method="post" class="form-horizontal" action="save.php">
<div class="form-group">
<label class="col-xs-3 control-label">Name:</label>
<div class="col-xs-8">
<input type="text" id="name" name="name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Your Skills:</label>
<div class="col-xs-8">
<input type="text" id="skills" name="skills" data-role="tagsinput" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label"></label>
<div class="col-xs-8">
<input type="submit" name="submit" value="Save"/>
</div>
</div>
</form>
</div>

Personalizar el campo input de tags

Para crear el campo input de los tags, debemos utilizar el parámetro data_role=”tagsinput”. El plugin automáticamente convertirá el campo input en un input ideal para introducir tags. Las teclas por defecto para introducir tags son, tanto la tecla ENTER y las comas. Puedes personalizar la funcionalidad del plugin mediante diferentes variables predefinidas. Por ejemplo, podemos establecer un máximo de tags con la variable de configuración del plugin maxTags.

$('#skills').tagsinput({
confirmKeys: [13, 44],
maxTags: 20
});

Guardar los tags en la base de datos

Ahora, por último, en el archivo save.php, guardaremos los tags recibidos de nuestro nuevo campo dentro de la tabla que creamos en el primer paso.

<?php
include_once("db_connect.php");
if(isset($_POST['skills']) && isset($_POST['name'])) {
$name = $_POST['name'];
$skills = $_POST['skills'];
$insert_query = "INSERT INTO developers (name, skills) VALUES ('".$name."', '".$skills."')";
mysqli_query($conn, $insert_query) or die("database error: ". mysqli_error($conn));
echo "Your details saved successfully. Thanks!";
} else {
echo "Please Enter you name and skills!";
}
?>

Fuente: phpzag.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP