[Resuelto] Extrayendo datos de mysql con jquery y mostrandolos en pantalla

Diesan Romero · 1 Julio 2018, 01:57 AM

Hola a todos, estoy creando un buscador tipo google, y me gustaria que cuando vaya poniendo las palabras me vayan saliendo opciones (tipo google) dependiendo de las palabras que ponga. Tengo una leve idea de usar $.get de jquery, porque lo vi en un foro de Internet, pero como la informacion es muy vieja queria preguntarles a ustedes si esto aun funciona y si no decirme si existe algun modulo o script em javascript que resuelva esto mas facil. Saludos.

#!drvy · 2 Julio 2018, 01:46 AM

Hay una libreria JS que a mi personalmente me encanta y ayuda a hacer un input con auto completado de forma relativamente fácil. Luego, efectivamente tienes que tirar de AJAX para ir actualizando la lista.

Por ejemplo, esto podría ser el html.

Código (html5) [Seleccionar]

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

Esto es el demo de busqueda.php, por supuesto, en tu caso en vez de buscar en un array, lo que vas a buscar es una BD, pero es para que te hagas la idea.

Código (php) [Seleccionar]

$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));

}

y esto el JS

Código (javascript) [Seleccionar]

document.addEventListener('DOMContentLoaded', function(){

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

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

        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'busqueda.php?busqueda=' + busqueda.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);

Aquí lo he hecho sin jQuery, pero vamos, viene siendo lo mismo.

Resultado:

Saludos

Diesan Romero · 2 Julio 2018, 04:35 AM

Cita de: #!drvy en 2 Julio 2018, 01:46 AM
Hay una libreria JS que a mi personalmente me encanta y ayuda a hacer un input con auto completado de forma relativamente fácil. Luego, efectivamente tienes que tirar de AJAX para ir actualizando la lista.

Por ejemplo, esto podría ser el html.

Código (html5) [Seleccionar] Expandir
<!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' 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>

Esto es el demo de busqueda.php, por supuesto, en tu caso en vez de buscar en un array, lo que vas a buscar es una BD, pero es para que te hagas la idea.
Código (php) [Seleccionar] Expandir
$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)); }

y esto el JS
Código (javascript) [Seleccionar] Expandir
document.addEventListener('DOMContentLoaded', function(){ var busqueda = document.getElementById('busqueda'); var awesomplete = new Awesomplete(busqueda, { minChars: 3, // solo se dan sugerencias si hay 3 o más letras escritas. maxItems: 10, // numero maximo de sugerencias a mostrar autoFirst: true }); busqueda.addEventListener('keydown', function(event){ if (this.value.length < awesomplete.minChars) { return true; } var xhr = new XMLHttpRequest(); xhr.open('GET', 'busqueda.php?busqueda=' + busqueda.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);

Aquí lo he hecho sin jQuery, pero vamos, viene siendo lo mismo.

Resultado:

Saludos

Tu eres mi salvador, pero la parte donde hay que extraer los datos de SQL es la que más me afecta porque no soy muy diestro en SQL y menos en php. Suponte que los logre extraer, será fácil para mi buscando en google, ahora, como hago para que se muestren? los paso a un array? o van directo o como es la cosa? Y la otra cosa es que tengo que usar GET o puedo usar POST? Cuál crees que me convenga más? Veo que los buscadores hoy en día usan GET, cierto?

srWhiteSkull · 2 Julio 2018, 15:20 PM

Cita de: magodiesan en 2 Julio 2018, 04:35 AM
...Suponte que los logre extraer, será fácil para mi buscando en google, ahora, como hago para que se muestren? los paso a un array? o van directo o como es la cosa?

Lo puedes ver perfectamente en el código, dentro de la función que devuelve la solicitud por AJAX.

Código [Seleccionar]


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

Cita de: magodiesan en 2 Julio 2018, 04:35 AM
Y la otra cosa es que tengo que usar GET o puedo usar POST? Cuál crees que me convenga más? Veo que los buscadores hoy en día usan GET, cierto?

Para consultas lo mejor es que uses GET y POST para cosas como un login o información que no quieras mostrar al usuario...

Diesan Romero · 2 Julio 2018, 16:30 PM

Cita de: srWhiteSkull en 2 Julio 2018, 15:20 PM
Lo puedes ver perfectamente en el código, dentro de la función que devuelve la solicitud por AJAX.
Código [Seleccionar] Expandir
... // Le pasamos la lista de autocompletado obtenido de php a Awesomplete awesomplete.list = Object.values(JSON.parse(xhr.responseText)); ...

Pero primero tengo que pasar los datos a un array para que luego Ajax los procese? Porque ya ahi los datos estan en un array, osea ya existen, por eso aparecen las opciones cuando vas escribiendo en el input, pero en este caso yo tengo que extraerlos de la base de datos, como yo se que datos extrae ajax en tiempo real de la base de datos mientras el usuario coloca lo que busca?

srWhiteSkull · 2 Julio 2018, 16:46 PM

Normalmente la consulta te devolverá un objeto, que facilmente podrás iterar y crear un array.

https://www.w3schools.com/php/php_mysql_select.asp

Un array en Php no es nada del otro mundo para alguien que haya trabajando con arrays en cualquier lenguaje.

http://php.net/manual/es/language.types.array.php

Cita de: magodiesan en 2 Julio 2018, 16:30 PMyo tengo que extraerlos de la base de datos, como yo se que datos extrae ajax en tiempo real de la base de datos mientras el usuario coloca lo que busca?

Exacto, tú simplemente tomas las palabras del input y haces la solicitud a la base de datos. Si te fijas en el código de #!drvy funciona de esa forma, que cada vez que se pulsa una tecla en el input toma el contenido del input y lanza la solicitud via AJAx. Luego el resultado es introducido en el método list del objeto awesomplete.

https://leaverou.github.io/awesomplete/

Según la documentación, lo que necesita para que Awesomplete funcione como se muestra en el código de ejemplo, debes instanciar awesomplete y asignarle el elemento que quieres que tenga ese comportamiento. Por medio de su propio JS y hoja de estilo el de forma opaca realizará el resto de forma automática, desplegar las sugerencias.

Código [Seleccionar]


...
var input = document.getElementById("myinput");
var awesomplete = new Awesomplete(input);
...

Diesan Romero · 2 Julio 2018, 17:47 PM

Cita de: srWhiteSkull en 2 Julio 2018, 16:46 PM

Según la documentación, lo que necesita para que Awesomplete funcione como se muestra en el código de ejemplo, debes instanciar awesomplete y asignarle el elemento que quieres que tenga ese comportamiento. Por medio de su propio JS y hoja de estilo el de forma opaca realizará el resto de forma automática, desplegar las sugerencias.
Código [Seleccionar] Expandir
... var input = document.getElementById("myinput"); var awesomplete = new Awesomplete(input); ...

Entendido todo 100% eres un Dios, pero hay un pero y es que por medio de su propio JS y hoja de estilo el de forma opaca realizara el resto de forma automatica, y si yo estoy usando bootstrap es me afecta?