Autocompletador de jQuery UI con imágenes y HTML personalizado en PHP

El plugin de jQuery Autocomplete te proporciona un método muy sencillo para añadir la función de autocompletar a una caja de texto. Permite al usuario realizar búsquedas rápidas y seleccionar un valor de una lista. Cuando el usuario escriba en la caja de texto, el plugin Autocomplete extrae los valores que concuerden y los lista debajo de la caja de texto. Puedes integrarlo de manera sencilla mediante jQuery UI, PHP y MySQL.

Por norma general, el widget Autocomplete extrae los valores de una base de datos y muestra las sugerencias debajo del campo de texto. Pero puedes personalizar el dropdown del autocompletador y sus sugerencias con HTML personalizado. Una lista personalizada es la mar de util cuando quieres mantener una coherencia con el diseño de tu sitio web. En este tutorial veremos cómo añadir HTML personalizado y mostrar imágenes y texto en un autocompletador utilizando jQuery UI, PHP y MySQL.

En el script del ejemplo, los valores que mostraremos serán una lista de miembros, a los cuales sumaremos imágenes y texto.

Crear la tabla de la base de datos

Para almacenar las sugerencias de nuestro autocompletador necesitaremos una tabla en la base de datos. El siguiente SQL crea una tabla users con campos muy básicos.

CREATE TABLE `users` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `first_name` varchar(25) COLLATE utf8_unicode_ci NOT NULL,
 `last_name` varchar(25) COLLATE utf8_unicode_ci NOT NULL,
 `image` varchar(150) COLLATE utf8_unicode_ci NOT NULL,
 `created` datetime NOT NULL,
 `modified` datetime NOT NULL,
 `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Textbox autocompletador

Código Javascript

Incluye la librería Javascript y la librería jQuery UI para utilizar el plugin Autocomplete.

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

<!-- jQueryUI library -->
<link rel="stylesheet" href="jquery-ui/jquery-ui.css">
<script src="jquery-ui/jquery-ui.js"></script>

Utilizaremos el método autocomplete() para inicializar el plugin Autocomplete.

• source – Especifica la ruta del archivo del lado del servidor que extrae la información de la BD
• minLength – El número mínimo de caracteres que el usuario debe ingresar para realizar la busqueda
• select – Este evento se ejecuta cuando un elemento es seleccionado en la lista de sugerencias.
• _renderItem – La extensión renderItem nos ayudará a personalizar el widget.

<script>
$(document).ready(function(){
    $("#searchInput").autocomplete({
        source: "getUsers.php",
        minLength: 1,
        select: function(event, ui) {
            $("#searchInput").val(ui.item.value);
            $("#userID").val(ui.item.id);
        }
    }).data("ui-autocomplete")._renderItem = function( ul, item ) {
    return $( "<li class='ui-autocomplete-row'></li>" )
        .data( "item.autocomplete", item )
        .append( item.label )
        .appendTo( ul );
    };
});
</script>

Código HTML

Definiremos un elemento HTML que haga de autocompletador.

<!-- Autocomplete input field -->
<input id="searchInput" placeholder="Enter member name..." autocomplete="off">

<!-- Hidden input for user ID -->  
<input type="hidden" id="userID" name="userID" value=""/>

Configuración de la base de datos (dbConfig.php)

Utilizaremos el fichero dbConfig.php para conectarnos a la base de datos. Para ello debemos definir el host ($dbHost), el username ($dbUsername), el password ($dbPassword) y el name ($dbName) de la base de datos.

<?php
// Database configuration
$dbHost     = "localhost";
$dbUsername = "root";
$dbPassword = "root";
$dbName     = "noprog";

// Create database connection
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

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

Autocompletador con imágenes y HTML personalizado (getUsers.php)

El getUsers.php se carga con el método autocomplete() del complemento jQuery UI Autocomplete.

<?php
// Include database config file
require_once 'dbConfig.php';
        
// Get search term
$searchTerm = $_GET['term'];

// Get matched data from the database
$query = "SELECT id, first_name, last_name, image FROM users WHERE (first_name LIKE '%".$searchTerm."%' OR last_name LIKE '%".$searchTerm."%') AND status = '1' ORDER BY first_name ASC";
$result = $db->query($query);

// Generate users data array
$userData = array();
if($result->num_rows > 0){
    while($row = $result->fetch_assoc()){
        $name = $row['first_name'].' '.$row['last_name'];
        $data['id']    = $row['id'];
        $data['value'] = $name;
        $data['label'] = '
        <a href="javascript:void(0);">
            <img src="images/users/'.$row['image'].'" width="50" height="50"/>
            <span>'.$name.'</span>
        </a>';
        array_push($userData, $data);
    }
}

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