Cómo crear una caja de texto con autocompletador y selección múltiple mediante jQuery

Una caja de texto con autocompletador y selección múltiple permite al usuario seleccionar un valor de una lista basándose en lo escrito por el usuario. Ayuda al usuario a encontrar y seleccionar un valor dentro de las sugerencias que el autocompletador te otorga. Es decir, cuando el usuario escriba en la caja de texto, se extrae la información de la base de datos y se muestran unas sugerencias debajo del campo. Estas sugerencias se basarán en lo que vaya escribiendo el usuario. En otro orden de cosas, queda decir que hacer que una caja de texto tenga función de autocompletar es muy sencillo gracias al plugin de jQuery UI Autocomplete.

Por regla general, los autocompletadores permiten seleccionar un unico valor dentro de una lista de sugerencias. En este tutorial te mostraremos cómo crear uno de estos elementos, pero con la posibilidad de poder seleccionar varios valores. Es decir, lo que comunmente se conoce como selección múltiple. Todo esto lo llevaremos a cabo con jQuery, PHP y MySQL.

En este ejemplo, nuestro autocompletador se encargará de buscar habilidades. A grandes rasgos esto es lo que llevaremos a cabo.

Crearemos nuestra caja de texto
Obtendremos los registros que casen con lo introducido por el usuario
Listaremos estas sugerencias debajo del campo
Haremos que el campo permita selecciones múltiples de las sugerencias dadas

Crear tabla de la base de datos

Tendremos que crear una tabla que almacene las habilidades que mas tarde mostraremos como sugerencia en la caja de texto. La tabla la llamaremos skills.

CREATE TABLE `skills` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
 `status` enum('1','0') COLLATE utf8_unicode_ci NOT NULL DEFAULT '1',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Caja de texto con autocompletador y selección múltiple

Primero tenemos que definir el elemento input que queremos que actúe como autocompletador.

<input type="text" id="skill_input"/>

Ahora utilizaremos el plugin jQuery Tokeninput para añadir la función de autocompletar en el campo que hemos designado antes para ello. Primero incluye la librería jQuery y la Tokeninput.

<!-- jQuery library -->
<script src="js/jquery.min.js"></script>

<!-- Tokeninput plugin library -->
<script src="js/jquery.tokeninput.js"></script>
<link rel="stylesheet" href="css/token-input.css" />

Inicializa y asigna el Tokeninput al campo mediante el método tokenInput(). También tendrás que definir la URL del script que se encargará de extraer la información de la base de datos.

<script>
$(document).ready(function() {
    $("#skill_input").tokenInput("search.php");
});
</script>

Extraer la información de la base de datos (search.php)

Necesitaremos de un script que genere las sugerencias basándose en lo escrito por el usuario. El fichero search.php generará los resultados de búsqueda y enviará al método tokenInput() para el listado de sugerencias del autocompletador.

Conectaremos con la base de datos
Obtendremos la palabra introducida por el usuario mediante el array GET
Extraemos la información de la base de datos
Generamos un array de resultados
Renderizamos los resultados en formato JSON

<?php

// Database configuration
$dbHost     = 'localhost';
$dbUsername = 'root';
$dbPassword = 'root';
$dbName     = 'noprog';

// Connect with the database
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

// Check connection
if($db->connect_error){
    die("Connection failed: " . $db->connect_error);
} 

// Get search term
$searchTerm = $_GET['q'];

// Get matched data from skills table
$query = $db->query("SELECT id, name FROM skills WHERE name LIKE '%".$searchTerm."%' AND status = '1' ORDER BY name ASC");

// Generate skills data array
$skillData = array();
if($query->num_rows > 0){
    while($row = $query->fetch_assoc()){
        $skillData[] = $row;
    }
}

// Return results as json encoded array
echo json_encode($skillData);

?>

El plugin Tokeninput de jQuery proporciona muchas opciones de configuración para personalizar la caja de texto. A continuación detallamos alguna de estas opciones.

Autocompletador multiselect con labels personalizados

<script>
$(document).ready(function() {
    $("#skill_input").tokenInput("search.php", {
        hintText: "Type your skills...",
        noResultsText: "Skill not found.",
        searchingText: "Searching..."
    });
});
</script>

Autocompletador multiselect con icono personalizado de eliminar

<script>
$(document).ready(function() {
    $("#skill_input").tokenInput("search.php", {
        deleteText: "&#x2603;"
    });
});
</script>

Límite de resultados y límite de caracteres

<script>
$(document).ready(function() {
    $("#skill_input").tokenInput("search.php", {
        minChars: 3,
        tokenLimit: 2
    });
});
</script>