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

Búsqueda instantánea con Ajax

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
    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

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

    Datatables Dropdown PDO, ServerSide, Responsiva

    ServerSide, Responsiva
    Opciones de exportacion Dropdown
    SweetAlert2
    Acciones (Editar, Agregar, Ver, Eliminar ) Dropdown

    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

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