Búsqueda instantánea con Ajax, PHP y MySQL. La búsqueda instantánea o búsqueda en vivo es un atributo de aplicaciones web. Se utiliza para buscar datos y mostrar resultados de búsqueda instantáneamente en la misma página sin la necesidad de recargar nuestra página.
Si es un desarrollador de PHP y busca una solución de búsqueda instantánea, llegaste al lugar correcto. En este tutorial, aprenderá a desarrollar un sistema de búsqueda instantánea usando la tecnología Ajax, PHP y MySQL.
Búsqueda instantánea con Ajax, PHP y MySQL: Estructura
Nuestro script contendrá los siguientes archivos y librerías
Ventajas de búsqueda instantánea Ajax
- Crearemos un ejemplo en vivo de búsqueda instantánea para permitir a los usuarios usar palabras clave y mostrar resultados instantáneamente con paginación dinámico.
- Así que procedamos a desarrollar un sistema de búsqueda instantánea con Ajax, PHP y MySQL.
- La ventaja de obtener respuesta muy rápida sin necesidad de recargar la pagina
Primer paso: Crear una tabla de base de datos MySQL
Primero crearemos la tabla de base de datos MySQL productos para almacenar los detalles del producto.
CREATE TABLE `productos` (
`id` int(20) NOT NULL,
`name` varchar(120) NOT NULL,
`brand` varchar(100) NOT NULL,
`price` decimal(8,2) NOT NULL,
`ram` char(5) NOT NULL,
`storage` varchar(50) NOT NULL,
`camera` varchar(20) NOT NULL,
`image` varchar(100) NOT NULL,
`quantity` mediumint(5) NOT NULL,
`status` enum('0','1') NOT NULL COMMENT '0-active,1-inactive'
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
INSERT INTO `productos` (`id`, `name`, `brand`, `price`, `ram`, `storage`, `camera`, `image`, `quantity`, `status`) VALUES
(1, 'Samsumg 9 Lite (Sapphire Black, 64 GB) (4 GB RAM)', 'Honor', '14499.00', '4', '64', '13', '1.png', 10, '1'),
(2, 'LG (Sandstone Blue, 32 GB) (3 GB RAM)', 'Infinix', '8999.00', '3', '32', '13', 'image-2.jpeg', 10, '1'),
(3, 'HUAWEI V8 Youth (Black, 32 GB) (4 GB RAM)', 'VIVO', '16990.00', '4', '32', '16', 'image-3.jpeg', 10, '1'),
(4, 'Motorola (Gold, 32 GB) (3 GB RAM)', 'Moto', '11499.00', '3', '32', '8', 'image-4.jpeg', 10, '1'),
(5, 'Lenovo (Venom Black, 32 GB) (3 GB RAM)', 'Lenevo', '8999.00', '3', '32', '13', 'image-5.jpg', 10, '1'),
(6, 'Samsung Galaxy (Gold, 16 GB) (3 GB RAM)', 'Samsung', '11990.00', '3', '16', '13', 'image-6.jpeg', 10, '1'),
(7, 'Moto Plus (Pearl White, 16 GB) (2 GB RAM)', 'Moto', '8799.00', '2', '16', '8', 'image-7.jpeg', 10, '1'),
(8, 'Panasonic (White, 16 GB) (1 GB RAM)', 'Panasonic', '6999.00', '1', '16', '8', 'image-8.jpeg', 10, '1'),
(9, 'OPPO (Black, 64 GB) (6 GB RAM)', 'OPPO', '18990.00', '6', '64', '16', 'image-9.jpeg', 10, '1'),
(10, 'Hello (Gold, 32 GB) (3 GB RAM)', 'Honor', '9999.00', '3', '32', '13', 'image-10.jpeg', 10, '1'),
(11, 'Asus ZenFone (Midnight Blue, 64 GB) (6 GB RAM)', 'Asus', '27999.00', '6', '128', '12', 'image-12.jpeg', 10, '1'),
(12, 'Redmi 5A (Gold, 32 GB) (3 GB RAM)', 'MI', '5999.00', '3', '32', '13', 'image-12.jpeg', 10, '1'),
(13, 'Intex (Black, 16 GB) (2 GB RAM)', 'Intex', '5999.00', '2', '16', '8', 'image-13.jpeg', 10, '1');
ALTER TABLE `productos`
ADD PRIMARY KEY (`id`);
ALTER TABLE `productos`
MODIFY `id` int(20) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=14;Segundo paso: Fichero de conexión
El fichero responsable de la conexión con MySQL se encuentra en config/Database.php. Usaremos una clase llamada Database en el cual desplegaremos las credenciales MySQL.
<?php
class Database{
private $host = 'localhost';
private $user = 'root';
private $password = "";
private $database = "pro_busqueda";
public function getConnection(){
$conn = new mysqli($this->host, $this->user, $this->password, $this->database);
if($conn->connect_error){
die("Error al conectar con MySQL: " . $conn->connect_error);
} else {
return $conn;
}
}
}
?>Tercer paso: Crear formulario de búsqueda
En el archivo index.php, crearemos un formulario de búsqueda con una entrada. También crearemos un contenedor para mostrar los resultados de búsqueda.
<?php
include('inc/header4.php');
?>
<title>Baulphp.com : Búsqueda instantánea con Ajax, PHP y MySQL</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/placeholder-loading/dist/css/placeholder-loading.min.css">
<script src="js/search.js"></script>
<?php include('inc/container4.php');?>
<div class="container">
<h3>Búsqueda instantánea con Ajax, PHP y MySQL</h3>
<br />
<div class="card">
<div class="card-header text-white bg-primary">Resultados de la busqueda</div>
<div class="card-body" id="searchSection">
<div class="form-group">
<input type="text" name="search" id="search" class="form-control" placeholder="Escriba su palabra clave de búsqueda aquí" />
</div>
<div class="table-responsive" id="searchResult"></div>
</div>
</div>
</div>
<?php include('inc/footer4.php');?>Cuarto paso: Solicitud de Ajax para mostrar los resultados de la búsqueda
En el archivo search.js, haremos una solicitud ajax a cargar_datos.php para obtener el resultado de la búsqueda y mostrarlo en keyup.
$(document).ready(function(){
searchData(1);
function searchData(page, searchQuery = '') {
$.ajax({
url:"cargar_datos.php",
method:"POST",
data:{search:'search', page:page, searchQuery:searchQuery},
success:function(data) {
$('#searchResult').html(data);
}
});
}
$('#searchSection').on('click', '.page-link', function(){
var page = $(this).data('page_number');
var searchQuery = $('#search').val();
searchData(page, searchQuery);
});
$('#search').keyup(function(){
var searchQuery = $('#search').val();
searchData(1, searchQuery);
});
});Quinto paso: implementar la búsqueda
En cargar_datos.php, llamaremos al método product() de la clase Search.php para obtener el resultado de la búsqueda.
<?php
include_once 'config/Database.php';
include_once 'class/Search.php';
$database = new Database();
$db = $database->getConnection();
$search = new Search($db);
if(!empty($_POST['search']) && $_POST['search'] == 'search') {
$search->product();
}
?>Conclusiones y recomendaciones
Buscar un registro desde MySQL sin tener que refrescar la página suele ser una ventaja en nuestros proyectos por la rapidez de la solicitud, sin mayor esfuerzo del servidor.
Puede ver la demostración en vivo desde el enlace Demostración y puede descargar el script desde el enlace
