Resumen: mostrar cómo autocompletar un campo con valores de una tabla de una base de datos MySQL; trayendo los datos con AJAX.
En este post te mostraré cómo sugerir nombres conforme el usuario escribe; trayendo los datos de MySQL con una consulta LIKE y usando fetch para traer los datos por AJAX en tiempo real.
Para lograr esto vamos a usar la librería awesomplete; cuya introducción ya vimos anteriormente. Si no la has visto, mírala para que veas cómo descargarla e incluirla.
En el servidor simplemente mostraremos un arreglo de datos que servirán para llenar la lista. Vamos a recibir un parámetro GET en la URL para la búsqueda.
Voy a usar el archivo de base de datos del tutorial de PHP con MySQL:
Ahora veamos el archivo que filtra los datos:
Lo que haremos será buscar en una base de datos de mascotas; si quieres puedes insertarlas con lo siguiente:
Al consultar con, por ejemplo, la letra a tenemos esto:
Aunque el autocompletado ya filtra los datos, siempre es importante tener un límite de datos. Imagina si fueran millones de registros, sería mejor buscar los que coinciden en el servidor, que buscarlos del lado del cliente.
En el HTML de nuestro input para autocompletar importamos los estilos, el script de awesomplete y nuestro propio script para el funcionamiento:
Lo único destacable es que el input tiene el id nombre y el autocomplete desactivado.
Finalmente veamos el script de JavaScript. Primero obtenemos una referencia al input con querySelector, y creamos un objeto de tipo Awesomplete; le pasamos el input como primer argumento, y como segundo argumento un objeto de configuraciones.
En el objeto de configuraciones indicamos las sugerencias, que son un arreglo vacío al principio. También indicamos el mínimo de caracteres a 1.
En la línea 13 defino la función que refresca la lista, la cual obtendrá el valor del input (es decir, lo que el usuario haya escrito); si hay algo escrito entonces se realiza una petición con fetch y tendremos el arreglo de MySQL que mostré anteriormente.
Después de eso, asignamos el arreglo a ac.list (recuerda que ac es un objeto de tipo Awesomplete) pero antes de eso lo mapeamos, pues Awesomplete requiere un arreglo plano, o un arreglo de objetos con la clave label (que es lo que se muestra) y value, que es lo que se coloca en el input al seleccionar una opción.
Finalmente agregamos un listener al input, para que cuando el usuario escriba se refresque la lista. Al final obtenemos el siguiente resultado:
Por cierto, si quieres el evento cuando se selecciona el valor del autocompletado puedes agregar un listener al input. El evento que dice que se ha seleccionado (ya sea con el mouse o usando el teclado) se llama awesomplete-selectcomplete.
Si quisieras que cuando se haga la selección, en lugar del id se pusiera el nombre, al mapear el arreglo coloca el nombre en el value.
He colocado el código completo en GitHub. Puedes verlo aquí.
También puedes ver más sobre los eventos de awesomplete en su página oficial.
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Hoy vamos a ver programar la impresión de un PDF generado a partir de HTML…
En este tutorial básico de JavaScript con HTML vamos a ver cómo llenar una lista…
En este artículo se presenta una guía para imprimir un PDF a partir de una…
En este post voy a enseñarte cómo imprimir un PDF a partir de su representación…
Esta web usa cookies.
Ver comentarios
Hola, espero me puedas responder ya que es un hilo bastante viejo, pero estoy haciendo un sistema de ventas y este autocompletar me viene perfecto para buscar los productos en el input, solo queria preguntar que deberia modificar para que al seleccionar uno de los datos el formulario me envie los datos al seleccionar o hacer click en este?
Gracias de antemano.
Hola. Gracias por sus comentarios. Si tiene alguna consulta, solicitud de creación de un programa o solicitud de cambio de software estoy para servirle en https://parzibyte.me/#contacto
Saludos!
Comparto una alternativa al archivo que filtra los datos, esperando tus comentarios y opinión sobre dicha solución, de ser posible:
include('conexion.php');
$conn = OpenCon();
$busqueda = $_GET["nombre"];
$miArreglo = array();
$sql = "SELECT * FROM mascotas where nombre like '%$busqueda%' ";
if (mysqli_query($conn, $sql)) {
$result = mysqli_query($conn, $sql);
while($row = $result->fetch_assoc()) {
$miarreglo[] = $row;
}
echo json_encode($miArreglo);
} else {
echo "Error: " . $sql . "" . mysqli_error($conn);
}
CloseCon($conn);
}
conexion.php ------
function OpenCon(){
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$db = "nombredb";
$conn = new mysqli($dbhost, $dbuser, $dbpass,$db) or die("Falló: %s\n". $conn -> error);
return $conn;
}
function closeCon($conn){
$conn->close();
}
Muchas gracias por compartir tu conocimiento.
¡Saludos!