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

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.

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

Nuestro script contendrá los siguientes archivos y librerías

Estructura de archivos busqueda instantanea
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.

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

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 0 / 5. Recuento de votos: 0

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad