0

Estoy haciendo un navegador tipo Google. Pero tengo una duda, ¿Cómo extraigo datos de una base de datos SQL y los muestro como opción cuando un usuario está tecleando una búsqueda en el input? Así como hace Google. Se que hay una consulta a SQL de la cual obtienes un objeto.

Bien, acá encontré un código averiguando por Internet, que hace lo que quiero.

Este es el php

$sugerencias = array(
    0 => 'como robar a bill gates',
    1 => 'como ser guay sin robar a bill gates',
    2 => 'bill gates es alienigena',
    3 => 'esto no tiene nada que ver con el resto',
    4 => 'tengo un cuerno de mamut y te lo meto por el cu..',
    5 => 'cuerno de cabra'
);

if(isset($_GET['busqueda'])){
    $busqueda = preg_quote($_GET['busqueda'], '~');
    $resultado = preg_grep('~'.$busqueda.'~', $sugerencias);

    die(json_encode($resultado, JSON_FORCE_OBJECT));

}

?>

Este es el HTML

<!DOCTYPE html>
<html lang='es'>
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Buscador</title>

    <link rel='stylesheet' href='https://cdn.rawgit.com/LeaVerou/awesomplete/gh-pages/awesomplete.css'>
</head>
<body>

    <form action='busqueda.php' method='GET'>
        <input type='text' id="busqueda" class="a" name='busqueda' placeholder='Busca algo!'>
        <button type='submit'>Buscar</button>
    </form>

<script src='https://cdn.rawgit.com/LeaVerou/awesomplete/gh-pages/awesomplete.min.js'></script>
<script src='sugerencias.js'></script>
</body>
</html>

Y esto es Ajax document.addEventListener('DOMContentLoaded', function(){

    var a = document.getElementsByClassName('a');
    var awesomplete = new Awesomplete(a, {
        minChars: 3, // solo se dan sugerencias si hay 3 o más letras escritas.
        maxItems: 10, // numero maximo de sugerencias a mostrar
        autoFirst: true
    });

    a.addEventListener('keydown', function(event){
        if (this.value.length < awesomplete.minChars) { return true; }

        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'busqueda.php?busqueda=' + a.value);
        xhr.onload = function(){

            if(xhr.status !== 200){
                console.log('El request ha fallado. ' + xhr.status);
            }

            // Le pasamos la lista de autocompletado obtenido de php a Awesomplete
            awesomplete.list = Object.values(JSON.parse(xhr.responseText));
        };
        xhr.send();
    });

}, false);

Es una librería que me recomendaron, que lo que hace es ir mostrando sugerencias de una búsqueda que se hace, pero como ven ya los datos están en un arreglo, y yo lo que quiero es extraerlos desde la base de datos.

Otra cosa, esa librería tiene estilos CSS personalizados que sin ellos no nace el efecto que quiero, así que cuando intento sobrescribir esos estilos con bootstrap entonces el script deja de funcionar ¿Alguien se le ocurre como remediar eso?

1
  • Cambia la lógica dentro de if(isset($_GET['busqueda'])){conectandote a una bbdd y usando LIKE en la query. Si no sabes como conectar a mysql desde php lo mejor la guia oficial php.net/manual/es/book.mysqli.php
    – JDev
    el 5 jul. 2018 a las 6:38

1 respuesta 1

0

Tienes la solución ya implementada, solo te falta darte cuenta que el array que tienes con textos fijos debes obtenerlo de la base de datos en vez de escribir tu cada fila. No te voy a escribir el código pero te voy a indicar la idea.

deberías cambiar esto

$sugerencias = array(
0 => 'como robar a bill gates',
1 => 'como ser guay sin robar a bill gates',
2 => 'bill gates es alienigena',
3 => 'esto no tiene nada que ver con el resto',
4 => 'tengo un cuerno de mamut y te lo meto por el cu..',
5 => 'cuerno de cabra');    

por algo así

//EN ESTE ENLACE PUEDES VER COMO OBTENER UN ARREGLO DESDE LA BD

http://www.cristalab.com/tutoriales/mostrar-un-array-de-una-base-de-datos-mysql-con-php-c42674l/

$sugerencias = mostrarMatriz(filtro_sugerencias);

if(isset($_GET['busqueda'])){
  $busqueda = preg_quote($_GET['busqueda'], '~');
  $resultado = preg_grep('~'.$busqueda.'~', $sugerencias);

  die(json_encode($resultado, JSON_FORCE_OBJECT));

}

?>
2
  • Ese tutorial usa una libreria de php para mysql obsoleta y no recomendable. Mejor mysqli o pdo
    – JDev
    el 5 jul. 2018 a las 7:07
  • yo uso pdo, y eso que dice filtro_sugerencias, el parámetro ese que es? una variable o que? el 5 jul. 2018 a las 17:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.