Búsqueda instantánea con Ajax, PHP y MySQL

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.

Índice

Búsqueda instantánea con Ajax, PHP y MySQL: Estructura

Nuestro script contendrá los siguientes archivos y librerías

Estructura de archivos busqueda instantanea

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.

Solución para las tildes y eñes PHP MYSQL

Puede ver la demostración en vivo desde el enlace Demostración y puede descargar el script desde el enlace

Búsqueda y resultados dinámicos

1 archivo(s) 7.27 KB

Descargar

Cómo sumar o restar años a una fecha en PHP

Busqueda Instantanea Búsqueda instantánea con Ajax

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

Entradas Relacionadas

Deja una respuesta Cancelar la respuesta