Remarcar palabras en los resultados de búsqueda con PHP y MySQL

Contar con un buscador es muy útil cuando listamos datos. Nos ayuda a encontrar rápidamente registros relevantes en la base de datos. Si a eso le sumamos el poder remarcar en los resultados de búsqueda aquellas palabras que concuerden con lo que hemos buscado, hace que esta función sea mucho más usable. Resaltar palabras clave ayuda al usuario a identificar fácilmente los registros más relevantes en los resultados de búsqueda.

 

¿En qué consiste esta función? Muy sencillo. Se trata de remarcar los términos de búsqueda con un color de fondo o un color de texto diferente en los resultados de búsqueda. En este tutorial, te mostraremos cómo buscar registros en la base de datos MySQL y resaltar las palabras clave en los resultados con PHP.

Remarcar palabras en el texto

La función personalizada highlightWords () nos ayudará a remarcar las palabras en el texto.

• Utilizaremos la función de PHP preg_replace () para realizar una búsqueda en base a expresiones regulares, agregando un elemento a cada cadena coincidente.
• A cada elemento coincidente le otorgaremos un clase de CSS
• La función highlightWords() acepta dos parámetros: $text, el contenido a buscar y reemplazar; $word, la cadena a buscar.

function highlightWords($text, $word){
    $text = preg_replace('#'. preg_quote($word) .'#i', '<span class="hlw">\0</span>', $text);
    return $text;
}

En el código de ejemplo, extraeremos información de posts de la base de datos y los incluiremos en la página web. En función de la búsqueda, los registros se filtrarán y el término de búsqueda se remarcará en los resultados.

Creación de la tabla de la base de datos

Para este ejemplo, crearemos una tabla de posts con ciertos campos básicos en la base de datos MySQL. La tabla de posts contendrá los registros en los que realizaremos las búsquedas.

CREATE TABLE `posts` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `content` text COLLATE utf8_unicode_ci NOT NULL,
 `created` datetime NOT NULL,
 `modified` datetime NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

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

Utilizaremos el siguiente código para conectar la base de datos mediante PHP y MySQL. Para ello debemos definir el host ($dbhost), el nombre de usuario ($dbUsername), la contraseña ($dbPassword) y el nombre de la base de datos ($dbName).

<?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);
}

Remarcar palabras clave en los resultados de búsqueda

Inicialmente, obtendremos todos los registros de la base de datos para luego listarlos en la página web. Basándonos en la palabra clave de la búsqueda, remarcaremos las coincidentes en los resultados. Para ello:

• Necesitaremos un formulario HTML para filtrar los registros según las palabras clave.
• Cuando el usuario busque registros por la palabra clave, utilizaremos la cláusula WHERE con el operador LIKE para filtrar los registros por el término de búsqueda.
• Antes de mostrar los resultados de la búsqueda, utilizaremos la función highlightWords() para remarcar las palabras coincidentes.
• Una vez que se le ha agregado la clase adecuada, será la hoja de estilo la encargada de que se muestre de manera distinta.

<?php
// Include the database config file
require_once 'dbConfig.php';

// If the search form is submitted
$searchKeyword = $whrSQL = '';
if(isset($_POST['searchSubmit'])){
    $searchKeyword = $_POST['keyword'];
    if(!empty($searchKeyword)){
        // SQL query to filter records based on the search term
        $whrSQL = "WHERE (title LIKE '%".$searchKeyword."%' OR content LIKE '%".$searchKeyword."%')";
    }
}

// Get matched records from the database
$result = $db->query("SELECT * FROM posts $whrSQL ORDER BY id DESC");

// Highlight words in text
function highlightWords($text, $word){
    $text = preg_replace('#'. preg_quote($word) .'#i', '<span class="hlw">\0</span>', $text);
    return $text;
}
?>

<form method="post">
    <div class="input-group">
        <input type="text" name="keyword" value="<?php echo $searchKeyword; ?>" placeholder="Search by keyword..." >
        <input type="submit" name="searchSubmit" value="Search">
    </div>
</form>

<?php
if($result->num_rows > 0){
    while($row = $result->fetch_assoc()){
        $title = !empty($searchKeyword)?highlightWords($row['title'], $searchKeyword):$row['title'];
        $contnet = !empty($searchKeyword)?highlightWords($row['content'], $searchKeyword):$row['content'];
?>
<div class="list-item">
    <h4><?php echo $title; ?></h4>
    <p><?php echo $contnet; ?></p>
</div>
<?php } }else{ ?>
<p>No post(s) found...</p>
<?php } ?>

Remarcar palabras clave sin CSS

También puedes utilizar CSS inline para remarcar palabras sin necesidad de utilizar una clase CSS. En ese caso tendrás que modificar la función highlightWords() como puedes ver a continuación:

function highlightWords($text, $word){
    $text = preg_replace('#'. preg_quote($word) .'#i', '<span style="background-color: #F9F902;">\0</span>', $text);
    return $text;
}