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?
if(isset($_GET['busqueda'])){
conectandote a una bbdd y usandoLIKE
en la query. Si no sabes como conectar a mysql desde php lo mejor la guia oficial php.net/manual/es/book.mysqli.php