Buscador con la librería ISOTOPE | barra de texto con filtrado de categorías
Publicado por Jose (1 intervención) el 07/02/2020 07:11:15
Que tal? estoy realizando un pequeño portafolio de imágenes con la librería ISOTOPE de github.
El caso es que estoy realizando un buscador, donde al momento que el usuario escriba algo en input este devuelva la categoría de esa imagen.
Un ejemplo muy claro es el de esta web: http://dynamic-search.webflow.io/
En el tiene un buscador donde al escribir su categoria o etiqueta, este o estos se llaman automáticamente.
HTML de ejemplo: En este caso, estoy usando la etiqueta (data-tipo) para a los atributos que tendra la categoria.
CODE JS:
Se me ocurría que si al menos el usuario tipea palabras clave, las imagenes se vieran atraidas por el atributo (data-tipo). Buscando un poco mas, he conseguido que obtenga por medio de tipeo pero desconozco como llamar a las categoría (data-tipo).
Si alguien ha trabajado con esta librería o tenga nociones y pueda instruirme un poco. Se le agradeceria mucho!.
documentacion:https://isotope.metafizzy.co/
El caso es que estoy realizando un buscador, donde al momento que el usuario escriba algo en input este devuelva la categoría de esa imagen.
Un ejemplo muy claro es el de esta web: http://dynamic-search.webflow.io/
En el tiene un buscador donde al escribir su categoria o etiqueta, este o estos se llaman automáticamente.
HTML de ejemplo: En este caso, estoy usando la etiqueta (data-tipo) para a los atributos que tendra la categoria.
1
2
3
4
5
6
7
8
9
10
11
12
<div id="formulario" class="contenedor">
<form action="">
<input type="text" class="busqueda" id="busqueda" placeholder="Search">
</form>
<div class="item"
data-categoria="Sketches"
data-tipo="Sketches ebook Boceto"
data-description=" Ebook Sketch | PSD">
<div class="item-content all Sketches ">
<img src="imgport/skecth-ebook.png" alt="">
</div>
</div>
CODE JS:
Se me ocurría que si al menos el usuario tipea palabras clave, las imagenes se vieran atraidas por el atributo (data-tipo). Buscando un poco mas, he conseguido que obtenga por medio de tipeo pero desconozco como llamar a las categoría (data-tipo).
1
2
3
4
document.querySelector('#busqueda').addEventListener('input', (evento) => {
const busqueda = evento.target.value;
});
Si alguien ha trabajado con esta librería o tenga nociones y pueda instruirme un poco. Se le agradeceria mucho!.
documentacion:https://isotope.metafizzy.co/
Valora esta pregunta
0