elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Guía actualizada para evitar que un ransomware ataque tu empresa


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Resuelto] Extrayendo datos de mysql con jquery y mostrandolos en pantalla
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Resuelto] Extrayendo datos de mysql con jquery y mostrandolos en pantalla  (Leído 2,834 veces)
Ali Baba


Desconectado Desconectado

Mensajes: 310


Ver Perfil WWW
[Resuelto] Extrayendo datos de mysql con jquery y mostrandolos en pantalla
« en: 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.


« Última modificación: 23 Agosto 2018, 02:14 am por #!drvy » En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: Extrayendo datos de mysql con jquery y mostrandolos en pantalla
« Respuesta #1 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
  1. <!DOCTYPE html>
  2. <html lang='es'>
  3.    <meta charset='utf-8'>
  4.    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  5.    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
  6.    <title>Buscador</title>
  7.  
  8.    <link rel='stylesheet' href='https://cdn.rawgit.com/LeaVerou/awesomplete/gh-pages/awesomplete.css'>
  9. </head>
  10.  
  11.    <form action='busqueda.php' method='GET'>
  12.        <input type='text' id='busqueda' name='busqueda' placeholder='Busca algo!'>
  13.        <button type='submit'>Buscar</button>
  14.    </form>
  15.  
  16. <script src='https://cdn.rawgit.com/LeaVerou/awesomplete/gh-pages/awesomplete.min.js'></script>
  17. <script src='sugerencias.js'></script>
  18. </body>
  19. </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
  1. $sugerencias = array(
  2.    0 => 'como robar a bill gates',
  3.    1 => 'como ser guay sin robar a bill gates',
  4.    2 => 'bill gates es alienigena',
  5.    3 => 'esto no tiene nada que ver con el resto',
  6.    4 => 'tengo un cuerno de mamut y te lo meto por el cu..',
  7.    5 => 'cuerno de cabra'
  8. );
  9.  
  10. if(isset($_GET['busqueda'])){
  11.    $busqueda = preg_quote($_GET['busqueda'], '~');
  12.    $resultado = preg_grep('~'.$busqueda.'~', $sugerencias);
  13.  
  14.    die(json_encode($resultado, JSON_FORCE_OBJECT));
  15.  
  16. }

y esto el JS
Código
  1. document.addEventListener('DOMContentLoaded', function(){
  2.  
  3.    var busqueda = document.getElementById('busqueda');
  4.    var awesomplete = new Awesomplete(busqueda, {
  5.        minChars: 3, // solo se dan sugerencias si hay 3 o más letras escritas.
  6.        maxItems: 10, // numero maximo de sugerencias a mostrar
  7.        autoFirst: true
  8.    });
  9.  
  10.    busqueda.addEventListener('keydown', function(event){
  11.        if (this.value.length < awesomplete.minChars) { return true; }
  12.  
  13.        var xhr = new XMLHttpRequest();
  14.        xhr.open('GET', 'busqueda.php?busqueda=' + busqueda.value);
  15.        xhr.onload = function(){
  16.  
  17.            if(xhr.status !== 200){
  18.                console.log('El request ha fallado. ' + xhr.status);
  19.            }
  20.  
  21.            // Le pasamos la lista de autocompletado obtenido de php a Awesomplete
  22.            awesomplete.list = Object.values(JSON.parse(xhr.responseText));
  23.        };
  24.        xhr.send();
  25.    });
  26.  
  27. }, false);


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

Resultado:



Saludos


« Última modificación: 2 Julio 2018, 02:13 am por #!drvy » En línea

Ali Baba


Desconectado Desconectado

Mensajes: 310


Ver Perfil WWW
Re: Extrayendo datos de mysql con jquery y mostrandolos en pantalla
« Respuesta #2 en: 2 Julio 2018, 04:35 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
  1. <!DOCTYPE html>
  2. <html lang='es'>
  3.    <meta charset='utf-8'>
  4.    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  5.    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
  6.    <title>Buscador</title>
  7.  
  8.    <link rel='stylesheet' href='https://cdn.rawgit.com/LeaVerou/awesomplete/gh-pages/awesomplete.css'>
  9. </head>
  10.  
  11.    <form action='busqueda.php' method='GET'>
  12.        <input type='text' id='busqueda' name='busqueda' placeholder='Busca algo!'>
  13.        <button type='submit'>Buscar</button>
  14.    </form>
  15.  
  16. <script src='https://cdn.rawgit.com/LeaVerou/awesomplete/gh-pages/awesomplete.min.js'></script>
  17. <script src='sugerencias.js'></script>
  18. </body>
  19. </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
  1. $sugerencias = array(
  2.    0 => 'como robar a bill gates',
  3.    1 => 'como ser guay sin robar a bill gates',
  4.    2 => 'bill gates es alienigena',
  5.    3 => 'esto no tiene nada que ver con el resto',
  6.    4 => 'tengo un cuerno de mamut y te lo meto por el cu..',
  7.    5 => 'cuerno de cabra'
  8. );
  9.  
  10. if(isset($_GET['busqueda'])){
  11.    $busqueda = preg_quote($_GET['busqueda'], '~');
  12.    $resultado = preg_grep('~'.$busqueda.'~', $sugerencias);
  13.  
  14.    die(json_encode($resultado, JSON_FORCE_OBJECT));
  15.  
  16. }

y esto el JS
Código
  1. document.addEventListener('DOMContentLoaded', function(){
  2.  
  3.    var busqueda = document.getElementById('busqueda');
  4.    var awesomplete = new Awesomplete(busqueda, {
  5.        minChars: 3, // solo se dan sugerencias si hay 3 o más letras escritas.
  6.        maxItems: 10, // numero maximo de sugerencias a mostrar
  7.        autoFirst: true
  8.    });
  9.  
  10.    busqueda.addEventListener('keydown', function(event){
  11.        if (this.value.length < awesomplete.minChars) { return true; }
  12.  
  13.        var xhr = new XMLHttpRequest();
  14.        xhr.open('GET', 'busqueda.php?busqueda=' + busqueda.value);
  15.        xhr.onload = function(){
  16.  
  17.            if(xhr.status !== 200){
  18.                console.log('El request ha fallado. ' + xhr.status);
  19.            }
  20.  
  21.            // Le pasamos la lista de autocompletado obtenido de php a Awesomplete
  22.            awesomplete.list = Object.values(JSON.parse(xhr.responseText));
  23.        };
  24.        xhr.send();
  25.    });
  26.  
  27. }, 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?
En línea

srWhiteSkull


Desconectado Desconectado

Mensajes: 444



Ver Perfil WWW
Re: Extrayendo datos de mysql con jquery y mostrandolos en pantalla
« Respuesta #3 en: 2 Julio 2018, 15:20 pm »

...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:
...
            // Le pasamos la lista de autocompletado obtenido de php a Awesomplete
            awesomplete.list = Object.values(JSON.parse(xhr.responseText));
...

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...
En línea

Ali Baba


Desconectado Desconectado

Mensajes: 310


Ver Perfil WWW
Re: Extrayendo datos de mysql con jquery y mostrandolos en pantalla
« Respuesta #4 en: 2 Julio 2018, 16:30 pm »

Lo puedes ver perfectamente en el código, dentro de la función que devuelve la solicitud por AJAX.
Código:
...
            // 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?
En línea

srWhiteSkull


Desconectado Desconectado

Mensajes: 444



Ver Perfil WWW
Re: Extrayendo datos de mysql con jquery y mostrandolos en pantalla
« Respuesta #5 en: 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

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?

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:
...
var input = document.getElementById("myinput");
var awesomplete = new Awesomplete(input);
...
« Última modificación: 2 Julio 2018, 16:48 pm por srWhiteSkull » En línea

Ali Baba


Desconectado Desconectado

Mensajes: 310


Ver Perfil WWW
Re: Extrayendo datos de mysql con jquery y mostrandolos en pantalla
« Respuesta #6 en: 2 Julio 2018, 17:47 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:
...
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?
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
C + MySQL, traspaso de variables a un query de MySQL en C. [Resuelto]
Programación C/C++
GisiNA 8 5,610 Último mensaje 9 Febrero 2014, 11:54 am
por GisiNA
[Resuelto] Jquery y foreach
Desarrollo Web
dimitrix 3 2,504 Último mensaje 6 Febrero 2015, 01:08 am
por dimitrix
[Resuelto] mostrar mas de un registro de base de datos mysql en textarea
PHP
demonstrator 4 5,259 Último mensaje 7 Abril 2015, 22:13 pm
por demonstrator
[Resuelto] jquery generar selector id
Desarrollo Web
gAb1 0 1,513 Último mensaje 23 Mayo 2015, 06:20 am
por gAb1
[Resuelto] Duda JQUERY JSON
Desarrollo Web
.:UND3R:. 4 2,207 Último mensaje 25 Noviembre 2015, 12:34 pm
por .:UND3R:.
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines