Puntos clave:
- Un cuadro de búsqueda en vivo utiliza JavaScript, PHP y MySQL para mostrar los resultados de la búsqueda al instante mientras escribes.
- El código JavaScript envía tu consulta de búsqueda a un script PHP, que consulta la base de datos y devuelve los resultados para que se muestren en la página. Esto hace que la búsqueda sea más rápida e interactiva, mejorando la experiencia del usuario.
¿Te has preguntado alguna vez cómo los sitios web sugieren términos de búsqueda a medida que escribes? Esto se llama cuadro de búsqueda en vivo.
En lugar de esperar a que se cargue toda la página cada vez que buscas, los cuadros de búsqueda en vivo te ofrecen resultados instantáneos. Esto hace que la búsqueda sea más fácil y rápida.
Los cuadros de búsqueda en vivo están hechos con JavaScript (jQuery), MySQL, PHP y AJAX.
En este blog, te mostraremos cómo crear un cuadro de búsqueda en vivo utilizando PHP, MySQL y AJAX. Trabajan juntos para hacer que tu función de búsqueda sea dinámica y receptiva.
PHP se encarga de la lógica del lado del servidor, MySQL almacena y recupera tus datos, y AJAX permite que la página actualice los resultados de la búsqueda sin recargar toda la página.
¿Por qué es importante Live Search Box?
Hoy en día, los usuarios quieren que las cosas sean rápidas y fáciles. Cuando pueden encontrar resultados mientras teclean, les ahorras tiempo y les mantienes interesados en tus contenidos o productos.
Un cuadro de búsqueda en vivo facilita y acelera que los visitantes encuentren lo que buscan. En lugar de ir a diferentes páginas o esperar a que se cargue la búsqueda, los usuarios obtienen sugerencias instantáneas mientras escriben.
Un cuadro de búsqueda en vivo también puede ayudarte a vender más productos, especialmente en las tiendas online. Al ofrecer resultados inmediatos, guía a los usuarios hacia el producto o categoría exactos que desean, para que no tengan que hacer demasiados clics.
Requisitos previos para Live Search Box
- Editor de código(Sublime o Notepad++ son buenas opciones)
- Apache y MySQL (ya sea XAMPP o WAMP). En este artículo utilizaré XAMPP.
- HTML, CSS, PHP, MySQL, Javascript, AJAX
En primer lugar, crearé el script en mi ordenador. Para ello, necesitaré una base de datos MySQL con algunos datos de ejemplo. Después, lo conectaré al formulario AJAX.
- Host de la base de datos: localhost
- Nombre de la base de datos: autocompletar (o cualquier cosa que quieras utilizar)
- Nombre de la tabla: Buscar
- Usuario de la base de datos: root
¿Listo para construir tu Live Search Box?
Experimenta una implementación y gestión sencillas de tu cuadro de búsqueda en vivo con PHP, MySQL y AJAX en el alojamiento de Cloudways.
Configurar Apache y MySQL
Abre XAMPP e inicia Apache y MySQL.
Ahora abre la URL, localhost:8080/phpmyadmin (8080 es el puerto en mi sistema; el tuyo puede ser diferente). Haz clic en Nuevo.
Crea una base de datos llamada autocompletar (o como quieras llamarla).
Copia y pega la siguiente consulta para crear la Tabla (buscar) y los nombres de las columnas (ID, Nombre) y luego inserta datos ficticios.
CREATE TABLE search ( id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY, Name VARCHAR(30) NOT NULL ); INSERT INTO `search` VALUES (1, 'David Copperfield'), (2, 'Ricky Ponting'), (3, 'Cristiano Ronaldo'), (4, 'Lionel Messi'), (5, 'Shane Watson');
A continuación se muestra el resultado de la consulta:
Configurar el entorno de desarrollo
Para crear el motor de búsqueda, necesitamos crear cinco archivos en la carpeta htdocs .
- El primer archivo es Search.php, que es el archivo principal donde los usuarios introducen datos y ven los resultados.
- El segundo archivo es db.php, que contiene los detalles de conexión a la base de datos.
- El tercer archivo es Ajax.php, que genera peticiones AJAX al servidor y devuelve los resultados.
- El cuarto archivo es script.js, que contiene funciones JavaScript para realizar peticiones AJAX.
- Por último, el quinto archivo es style.css, que contiene el estilo para el motor de búsqueda.
Paso 1: Crear el archivo principal (Search.php)
Este es el archivo principal del motor de búsqueda, donde el usuario introduce los datos y ve el resultado. Crea un archivo llamado search.php y pega en él el siguiente código:
<!DOCTYPE html> <html> <head> <title>Live Search using AJAX</title> <!-- Including jQuery is required. --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- Including our scripting file. --> <script type="text/javascript" src="script.js"></script> <!-- Including CSS file. --> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <!-- Search box. --> <input type="text" id="search" placeholder="Search" /> <br> <b>Ex: </b><i>David, Ricky, Ronaldo, Messi, Watson, Robot</i> <br /> <!-- Suggestions will be displayed in below div. --> <div id="display"></div> </body> </html>
Paso 2: Crear el archivo de conexión a la base de datos (db.php)
Este archivo contiene los detalles de conexión a la base de datos. Crea un archivo llamado db.php y pega en él el siguiente código:
<?php
//Database connection.
$con = MySQLi_connect(
"localhost", //Server host name.
"root", //Database username.
"", //Database password.
"autocomplete" //Database name or anything you would like to call it.
);
//Check connection
if (MySQLi_connect_errno()) {
echo "Failed to connect to MySQL: " . MySQLi_connect_error();
}
?>
Paso 3: Crear el archivo de solicitud AJAX (Ajax.php)
Este es el archivo principal que genera peticiones AJAX para el servidor y devuelve los resultados. Crea un archivo llamado ajax.php, y pega en él el siguiente código:
<?php
//Including Database configuration file.
include "db.php";
//Getting value of "search" variable from "script.js".
if (isset($_POST['search'])) {
//Search box value assigning to $Name variable.
$Name = $_POST['search'];
//Search query.
$Query = "SELECT Name FROM search WHERE Name LIKE '%$Name%' LIMIT 5";
//Query execution
$ExecQuery = MySQLi_query($con, $Query);
//Creating unordered list to display result.
echo '
<ul>
';
//Fetching result from database.
while ($Result = MySQLi_fetch_array($ExecQuery)) {
?>
<!-- Creating unordered list items.
Calling javascript function named as "fill" found in "script.js" file.
By passing fetched result as parameter. -->
<li onclick='fill("<?php echo $Result['Name']; ?>")'>
<a>
<!-- Assigning searched result in "Search box" in "search.php" file. -->
<?php echo $Result['Name']; ?>
</li></a>
<!-- Below php code is just for closing parenthesis. Don't be confused. -->
<?php
}}
?>
</ul>
Paso 4: Crear el archivo de funciones JavaScript (script.js)
Este archivo contiene las funciones Javascript que realizan las peticiones AJAX. Crea un archivo llamado scripts.js y pega en él el siguiente código:
//Getting value from "ajax.php".
function fill(Value) {
//Assigning value to "search" div in "search.php" file.
$('#search').val(Value);
//Hiding "display" div in "search.php" file.
$('#display').hide();
}
$(document).ready(function() {
//On pressing a key on "Search box" in "search.php" file. This function will be called.
$("#search").keyup(function() {
//Assigning search box value to javascript variable named as "name".
var name = $('#search').val();
//Validating, if "name" is empty.
if (name == "") {
//Assigning empty value to "display" div in "search.php" file.
$("#display").html("");
}
//If name is not empty.
else {
//AJAX is called.
$.ajax({
//AJAX type is "Post".
type: "POST",
//Data will be sent to "ajax.php".
url: "ajax.php",
//Data, that will be sent to "ajax.php".
data: {
//Assigning value of "name" into "search" variable.
search: name
},
//If result found, this funtion will be called.
success: function(html) {
//Assigning result to "display" div in "search.php" file.
$("#display").html(html).show();
}
});
}
});
});
Paso 5: Crear el archivo de estilo (style.css)
Este archivo contiene los elementos de estilo para el motor de búsqueda. Crea un archivo llamado style.css y pega en él el siguiente código:
a:hover {
cursor: pointer;
background-color: yellow;
}
Probar el Cuadro de Búsqueda en Directo
La búsqueda en vivo ya está lista para probarla. Para ello, abre search.php escribiendo esta dirección en tu navegador: localhost:8080/search.php
A continuación, pulsa CTRL+F e introduce un texto que se buscará en la base de datos.
Cuando escribas tu búsqueda, enviará el texto a script.js. Éste enviará entonces la petición a ajax.php. En ajax.php, una función llamada fill() enviará los resultados. Esta función también mostrará los resultados en el div de visualización de la página search.php.
Eso es.
Resumen
Cuando los usuarios pueden ver los resultados de la búsqueda mientras escriben, tu sitio web es más interactivo y dinámico. Un cuadro de búsqueda en vivo no sólo es mejor para los usuarios, sino que también mejora el funcionamiento general de tu sitio web.
Utilizando jQuery para el front-end AJAX, PHP para el procesamiento del lado del servidor y MySQL para la gestión de la base de datos, puedes crear fácilmente una función de búsqueda que funcione bien con los estándares modernos de desarrollo web.
P: ¿Cómo funciona la Búsqueda en Directo?
R: Cuando los usuarios están escribiendo, la búsqueda en vivo muestra sugerencias sobre cómo completar la palabra clave. Puede bastar con introducir un carácter para que la casilla se autocomplete.
P: ¿Por qué se llama Búsqueda en Directo?
R: Una de las formas más cómodas de buscar datos concretos es el cuadro de búsqueda AJAX. También se denomina búsqueda en vivo porque reacciona a las entradas de los usuarios en tiempo de ejecución.
P: ¿Por qué elegir la Búsqueda en Directo en lugar del Cuadro de Búsqueda tradicional?
R: Muchos usuarios prefieren las búsquedas en directo a las tradicionales por su rapidez y sus útiles sugerencias.
¿Qué es la búsqueda en directo AJAX?
A) La búsqueda en directo AJAX es una función que muestra resultados de búsqueda en tiempo real a medida que los usuarios escriben, utilizando AJAX para obtener y mostrar datos del servidor sin actualizar la página.
¿Cómo crear una búsqueda en vivo en PHP?
A) Crear una búsqueda en vivo en PHP implica utilizar AJAX para enviar la entrada del usuario a un script PHP del lado del servidor, que luego consulta una base de datos en busca de resultados coincidentes y los devuelve al navegador.
Aquí tienes una guía paso a paso:
Crea el Front-End (HTML y JavaScript):
<input type="text" id="search" placeholder="Search here...">
<div id="results"></div>
<script>
document.getElementById('search').addEventListener('keyup', function() {
let query = this.value;
if (query !== "") {
fetch('search.php?q=' + query)
.then(response => response.text())
.then(data => document.getElementById('results').innerHTML = data);
} else {
document.getElementById('results').innerHTML = "";
}
});
</script>
Escribe el Script PHP Back-End (search.php)
<?php
$conn = new mysqli('localhost', 'username', 'password', 'database');
if ($conn->connect_error) {
die('Connection failed: ' . $conn->connect_error);
}
if (isset($_GET['q'])) {
$q = $conn->real_escape_string($_GET['q']);
$sql = "SELECT * FROM products WHERE name LIKE '%$q%'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo "<p>" . $row['name'] . "</p>";
}
} else {
echo "No results found.";
}
}
?>
Start Growing with Cloudways Today.
Our Clients Love us because we never compromise on these
Shahzeb Ahmed
Un creativo de día (con una taza de té) y un creativo de noche. Ahmad Kamran es redactor de contenidos estacionales y Ejecutivo de Marketing Senior en Cloudways. Puedes encontrarle en su escritorio escribiendo, elaborando estrategias o jugando. Y en caso de que no puedas encontrarle aquí, estará en la montaña o junto a la orilla del río.
