Implementar un buscador dinamico usando datalist en html
Existen diferentes plugins para implementar un buscador, pero en esta ocasión usaremos los datalist de html para nuestra función.
Para comenzar creamos nuestra vista donde tendremos un input de tipo search y el datalist que estará asociado a este input.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de datalist en HTML</title>
</head>
<body>
<label for="frutas">Selecciona una fruta:</label>
<input list="frutas" id="fruta" name="fruta" autocomplete="off"> <datalist id="frutas">
<option value="Manzana">
<option value="Plátano">
<option value="Fresa">
<option value="Uva">
<option value="Mango">
</datalist>
</body>
</html>
Al abrir nuestra página podremos ver como se carga la lista en el datalist por medio de las opciones. Cuando buscamos el input va filtrando cada item, para luego poder seleccionar el indicado.
De esta forma tenemos un buscador de items si la necesidad de usar plugins extras.
Publicar un comentario
0 Comentarios