Hoy voy a enseñarte a crear un buscador con autocompletado desde cero
y vamos a utilizar tres tecnologías para ello
Next Yes, Tailwind y una biblioteca de Algolia
que es totalmente gratuita, de código abierto
y que como vas a ver, como te voy a enseñar, no hace falta que utilices Algolia
porque esta biblioteca es totalmente de código abierto
la tienes aquí en GitHub, se llama Autocomplete
y nos va a facilitar un montón, un montón la vida
ya lo verás, te lo voy a enseñar y va a ser súper interesante
el proyecto que vamos a utilizar es este, Cyber Monday
es un proyecto donde yo tengo un montón de ofertas y chollos
pero ¿qué pasa? que tengo demasiados, demasiadas ofertas
demasiadas ofertas donde gastar el dinero
bueno, pues lo que vamos a hacer es facilitarle la vida al usuario
y le vamos a poner aquí un autocompletado, una búsqueda
para que pueda filtrar más fácilmente y pueda entrar al detalle de cada una de estas ofertas
así que vamos a verlo paso a paso
para ello, aquí tengo mi proyectito de Next Yes
con un montón de componentes, el que me interesa es este de Search
de hecho si pongo aquí H1 Search para que veas dónde está
quedaría aquí, poco a poco ahora lo iremos estilando
le daremos vida, pero déjame que te enseñe dos cositas
todos los componentes, bueno, que no son muy importantes
pero aquí tenemos las páginas
el index sería la home que estás viendo
y también tenemos una página que es el detalle
que puedes acceder a partir de la ID
aquí si pones Detail 1
accederías al detalle de esa oferta
y aquí es donde queremos llevar al usuario una vez que hace el autocompletado
además de esto también tenemos una API, esto es con Next Yes
que te dejo por arriba, aquí, te dejo por aquí
te dejo mi curso de Next Yes por si quieres repasar cómo funciona y todo esto
tendríamos dos APIs, una para recuperar todas las ofertas
y otra para buscar las ofertas
podemos recuperarlas por ID o utilizando una keyword para que nos lo filtre
y este justamente es el que vamos a utilizar para nuestro autocompletado
venga, vamos a darle vida poco a poco a nuestro buscador
¿qué es lo que necesitamos que sea un buscador?
pues obviamente tiene que ser un formulario
así que vamos a empezar aquí con un formulario
también, por supuesto, necesitaríamos un input
pero lo vamos a poner dentro de un div
más que nada para envolverlo
y aquí tendríamos nuestro input
voy a guardar los cambios
bueno, ya empieza a verse alguna cosita por aquí
vamos a estilar con Tailwind
vamos a poner que el formulario
vamos a tener que esté a Flex
Justify, Center
y le vamos a dar un poquito de Margin Bottom hacia abajo
venga, ya lo tenemos ahí
ahora, en lo que va a envolver todo esto
vamos a hacer un poco lo mismo
vamos a poner aquí un Flex
vamos a hacer que esto que envuelve a todo
que sea Relative, ¿vale?
con el Position Relative
y vamos a darle un toquecito
vamos a darle un toquecito
para que, hombre, para que se note, ¿no?
que es de Black Friday y todo esto
a ver, vamos a coger
vamos a tomar, vamos a tener un poquito más de espacio por aquí
y lo que vamos a ponerle es como un Gradient, ¿vale?
vamos a decirle que esto tiene un Gradient
que va a ir de hacia la derecha, ¿vale?
Top Right
así que TR
y ahora le decimos que vaya desde el Púrpura
el número 600
y aquí hasta el azul
del 300
perfecto
le podríamos dar
mira, ya empieza a quedar ahí bien, ¿vale?
vamos a darle un poquito más de Rounded
que sea totalmente redondo
y que ocupe
dos sextos del ancho
bueno, no te preocupes
que esto poco a poco lo iremos arreglando
porque ahora no queda del todo bien
esto es porque el Input
también necesita sus estilos
vamos a hacer que
tome todo el espacio
le damos un poquito de Padding
también a la izquierda todavía más Padding
y también Rounded
Full
esto ya empieza a quedar un poquito mejor
¿vale?
esto normalmente veo
que es por un tema también de
cómo ocupa esto
así que vamos a poner aquí
que sea todo el espacio
a ver ahora
ahora sí
ahora sí que empieza a quedar bien
y va tomando más espacio
más espacio
bueno, ya tenemos un poquito
nuestro buscador
todavía le quedan cositas
pero visualmente
aquí ya sí que está el buscador
perfecto
¿cómo vamos a hacer esto
de que lleve a la vida?
¿cómo vamos a tener este autocomplete?
lo primero que tenemos que hacer
es instalar justamente
la librería de Algolia
así que voy a hacer aquí
un npm install
de esta dependencia
Algolia
autocomplete core
fíjate que lo vamos a hacer
desde cero
porque normalmente
podrías instalar un widget
o lo que sea
pero a mí
que yo soy un amante
de la performance
pues lo que voy a hacer
es que sea lo más pequeñito posible
este autocomplete
que vamos a hacer
así que instalamos
la dependencia
con la versión exacta
ahora esto se ha refrescado
justamente
voy a cerrar
esta
creo que es esta
a ver
voy a
ahora
no me vaya a equivocar
y vamos a tener que empezar
de cero
vamos a importar aquí
importar
create autocomplete
y esto lo hacemos
de Algolia
autocomplete core
así que ahora
tenemos que crear
justamente
este autocomplete
¿cómo lo creamos?
bueno pues vamos a ir
a nuestro componente
y lo primero que vamos a tener
sería un estado
set autocomplete
state
use state
esto habrá que importarlo
también
el use state
de React
¿vale?
este estado
del autocomplete
vamos a tener
por un lado
todas las colecciones
y por otro lado
vamos a saber
si está abierto o no
por defecto
va a estar cerrado
ya verás
que este estado
se va a actualizar
gracias a la librería
de Algolia
así que vamos a verlo
paso a paso
así que vamos a crearlo
autocomplete
¿cómo creamos?
pues utilizando
este método
create autocomplete
que habíamos puesto aquí
lo habíamos importado
y ahora
ahora viene
lo realmente interesante
¿qué es lo que necesita
el create autocomplete?
por un lado
tendríamos
un callback
que se va a ejecutar
cada vez que cambie
el estado del autocomplete
aquí tendríamos
el state
y lo que vamos a hacer
es justamente
llamar el set autocomplete
state
para actualizar
el estado
del componente
digamos que este
es el estado interno
de la biblioteca
de Algolia
y esto sería
el del componente
así que cada vez
que cambia
el autocomplete
de Algolia
lo que queremos
es reflejarlo
en el componente
ahora
tenemos otro método
que es
get sources
y aquí es donde está
justamente
la magia
de que tú aquí
puedes conectarlo
con todas las APIs
que quieras
como quieras
mira
vamos a decirle
source ID
¿vale?
hay que indicar
cada una
porque si te fijas
el sources
es un array
es una lista
tú puedes tener
más de una fuente
de datos
en este caso
vamos a tener una
que le vamos a llamar
offers
o pondrías
force
offers
next API
para diferenciar
por si luego
queremos tener
otro offers
tú al final
podrías seleccionar esto
y le tenemos que decir
cómo vamos a recuperar
los items
utilizando
esta fuente
de datos
así que
recibiríamos aquí
la query
¿cómo recibiríamos
la query?
ay mira
es que aquí
digo
¿por qué se me pone
aquí en rojo?
es que esto
es un objeto
es un array
de objetos
¿vale?
importante
ahora sí
venga
source ID
y get items
en el get items
es donde vamos a recuperar
los datos
para esta fuente
mira
buen intento
GitHub Copilot
pero no es exactamente así
lo primero
es que vamos a ver
si realmente
tenemos query
¿vale?
con esto hacemos
una doble negación
y vemos si es truci
y ya está
y si tenemos ahí
un valor
lo que vamos a hacer
es
ahora sí
un fetch
de API
API
barra search
esta API
es la que te he enseñado
antes
que tenemos aquí
search
y esta es la que vamos a utilizar
esta parte de aquí
pasándole Q
que va a ser
una parte de la URL
query
la Q sería como query
se utiliza bastante
en las APIs de búsqueda
pero no sé si sería
mejor llamarle query
y tal
pero bueno
Q de query
ya verás que en Google
si te fijas alguna vez
arriba lo pone
ahora que hacemos esto
pues lo que tenemos que hacer
es den
la respuesta
la transformamos en JSON
y con esto
debería ser
suficiente
lo único que tendríamos que hacer
es devolver esto
aquí lo que puedes hacer
si quieres es devolver
una arribación
en el caso que no tengas query
o directamente
si no devuelves nada
también lo va a ignorar
así que con esto
ya lo tendrías
bueno pues con esto
tenemos ya el autocomplete
ya lo hemos iniciado
una cosa interesante
que puedes hacer
es que este search
lo podrías también
personalizar a través
de las props
así que buena idea sería
que en las opciones estas
puedas pasarle también
pues todo lo que
te venga por props
¿vale?
ahora lo que vamos a hacer
es que si te fijas
este autocomplete
se estaría creando
o recreando
cada vez que se vuelva
a renderizar el componente
vamos a evitar esto
utilizando un
use memo
así que creamos
un use memo
y aquí
vamos a pasarle
la dependencia
de las props
este use memo
hay que importarlo
desde react
¿qué es lo que hacemos
o qué es lo que evitamos
con esto?
lo que estamos haciendo
al use memo
es decirle
vale
créame este autocomplete
solo cuando cambien
las props
de esta forma
el autocomplete
solo nos lo va a crear
una vez
a no ser que cambies
el valor de las props
desde fuera
pero así
en lugar de recrearlo
en cada render
lo vamos a crear una vez
que hombre
crear el autocomplete
puede ser bastante costoso
y esto va a mejorar
un poquito
el rendimiento
o al menos
va a evitar hacer
cosas que no debería
ahora sí
ya tenemos autocomplete
lo tenemos con el use memo
guardo los cambios
todavía no funciona
porque no lo estamos utilizando
pero vamos a empezar
a crear aquí
las referencias
de nuestros elementos
que le vamos a tener
que pasar
para poder
pasarle diferente
información a autocomplete
así que tendríamos
el formref
que esto sería
un urref null
tendríamos el inputref
con urref null
tendríamos el panelref
el panelref
es donde se van a dibujar
los resultados
de la búsqueda
¿vale?
ahora con estas referencias
que ahora veremos
como lo hacemos
lo que tendríamos que hacer
es recuperar
las props
que va a tener
el formulario
el input
y los resultados
así que empezamos
con las props
del formulario
y para eso
le damos a autocomplete
punto get form props
y aquí
lo que le tenemos que hacer
es pasarle
el input element
que es básicamente
el inputref
punto current
esto mismo
lo tendríamos que hacer
pues también
con el input props
¿vale?
input props
get input props
importante
el método se llama diferente
input element
inputref
de hecho aquí
me estoy fijando
¿vale?
fíjate que aquí
se le pasa el inputref
al form props también
no se le pasa el form
es un poco raro
pero es así
y ya está
por ahora
ya lo tendríamos
estos form props
se los vamos a pasar
por un lado aquí
form props
estos
claro te estabas preguntando
pero ¿qué es esto
de form props?
bueno pues fíjate
lo que le pasa
le pasa el action
no validate
el role
el on submit
y el on reset
¿vale?
le pasa diferente información
para que no la tengas
que hacer tú
y la haga la biblioteca
y esto mismo
habría que hacerlo
con el input
así que input props
y ya tendríamos
esta parte
guardamos los cambios
¿vale?
me dice que el urref
no existe
porque no lo he importado
importante
ahora empieza
a estar un poquito mejor
¿vale?
fíjate
que en el input este
me ha desaparecido
este placeholder
este placeholder
me ha desaparecido
porque ahora
en realidad
en lugar de tenerlo aquí
lo deberíamos hacer
desde el autocomplete
aquí en autocomplete
deberíamos pasarle
por ejemplo
playholder
y aquí
busca tu oferta
y ahora
ahí lo tenemos
¿vale?
lo hemos recuperado
perfecto
pues vamos a seguir
para seguir con esto
lo que deberíamos hacer
justamente es
pues mostrar
los resultados
para ello
aquí
tenemos
un estado
que es
autocomplete state
is open
y con esto
podemos saber
si realmente
tenemos resultados
si estamos buscando
o no estamos buscando
vamos a poner aquí
un tip
class name
vamos a fiarnos un poco
a ver que
del autocomplete
de githaco pilot
a ver
absolute
ref
panel ref
perfecto
porque este es justamente
el panel ref
lo que sí que nos faltaría aquí
es que también
habría que pasarle
las props
del autocomplete
punto
get
panel
props
y en este
no hace falta
que hagamos nada
no hay que pasarle nada
sino que simplemente
con esto
ya lo tendríamos
ahora
aquí dentro
es donde va a ocurrir
la magia
y para ello
lo que tenemos que hacer
es recorrer
las colecciones
del autocomplete state
punto collections
punto map
tenemos cada una
de las colecciones
de hecho vamos a recuperar
también el index
de estas colecciones
voy a recuperar
un poquito de espacio
por aquí
y aquí
vas a ver
lo que tenemos
que renderizar
¿qué es lo que vamos
a renderizar aquí?
bueno
aquí lo que vamos a renderizar
son todas las colecciones
fíjate que tú puedes tener
diferentes fuentes
de datos
aquí solo tenemos una
por lo tanto
solo vamos a verla en una
pero vamos a tener aquí
los items
de la colección
de una colección
vamos a tener sus items
pero podríamos tener
de más de un sitio
o sea
tenlo en cuenta
esto
hay que ponerlo así
con llaves
vale
con llaves
ahora
creo que sí
a ver
declaration
menos mal
que esto
ha mejorado bastante
aquí
ahora
ahora sí
ahora sí
es que
cuando se ponen
estas cosas
y te tienes que poner
a cerrar llaves
paréntesis
y todo esto
es una locura
bueno
ya hemos recuperado
los items
de la colección
y con estos items
vamos a
justamente renderizarlos
vamos a tener aquí
una sección
vamos a utilizar
una key
con la key
vamos a poner
section
y vamos a poner aquí
el índice
porque no es muy importante
y los índices
no van a cambiar
aquí tendríamos
el section
y aquí si
podrías poner
items.map
una cosa
que podemos hacer
items.length
es mayor a cero
entonces
lo que vamos a hacer
es tener
un ul
aquí recuperamos
otra vez más
las props
que vamos a tener
del get list props
aquí tampoco
hace falta
que le pasemos nada
ahora verás
cuando veamos
el html
que nos devuelve
como aquí también
get list props
ves
tienes el role
área label
y el id
todo esto
es súper importante
porque esto
es lo que necesita
el autocomplete
como para saber
dónde tiene que hacer
cada cosa
así que
que no se te olvide
porque si no
puede no funcionarte
ahora que tenemos
este ul
lo que nos faltaría
es simplemente
renderizar
los resultados
así que vamos a poner aquí
items.map
vamos a tener
que cada item
lo vamos a renderizar
y voy a crear
un nuevo componente
que le voy a llamar
autocomplete item
donde va a tener
la key
va a ser
item.id
porque la id
la devolvemos
desde la api
y aquí vamos a tener
el resto del item
vale
es normal
esto no existe
ahora lo tengo que crear
lo importante
es que todo
funcione más o menos
que no se me olvide
cerrar nada
vale
vamos a ver
si esto renderiza
alguna cosa
vamos a tener
por aquí
vale
esto lo podríamos
hacer así
y vamos a devolver
return
link
vamos a poner
por lo menos
creo que el name
no me lo devuelve
la api
vamos a ver
que es lo que devuelve
el json
title
vale
en lugar de name
tendríamos el title
la descripción
no es interesante
la imagen
sí
pero es image
lo podríamos ver aquí
tendríamos
image
id
y price
id
title
image
y price
vale
así que vamos a poner
el title
guardo los cambios
y vamos a probar aquí
vale
title is not defined
bueno
empieza a ver la cosa
bueno
vamos a ver
que es lo que ha pasado
aquí en el item
deberíamos tener
items.map
vamos a ver
aquí
en items
lo que tenemos
items
vale
vamos a
abrir las herramientas
de desarrollo
la voy a poner abajo
porque si no
no voy a ver nada
y en la consola
venga
que aquí a mí
además se me está quejando
de cositas
vale
pues vamos a poner la s
bueno
pero fíjate que tengo aquí
como todos los resultados
un montón de resultados
con la s
vale
title
title
esto recuperamos
los items
esto lo tenemos aquí
items
o sea
esto está funcionando bien
de que está devolviendo
aquí se está devolviendo
los items
o sea
tenemos aquí los items
y luego dice
si items
es mayor que cero
entonces
item
item
item
vamos a ver
item
item
title
y esto
lo tendríamos
de aquí
en item
y aquí
debería estar
pasando
ay es que he puesto
tite
tite
esto
amigos
es lo que pasa
cuando no
estás utilizando
linter
no lo hagas
vale
a ver ahora
vale
ahora sí que tenemos
información
lo que vamos a hacer
es que esto
pues quede bastante
más bonito
para que se vea bien
y no me oculte
información
pero al menos
ahora sí que sé
que está funcionando
vale
tenemos la id
title
imagen
press
vale
vamos a tener aquí
por un lado
el i
que esto es
exactamente lo que teníamos
pero
mejor formateado
y aquí lo que quiero
es que utilice
el link
de
a ver
donde me lo ha importado
vale
voy a importar link
de next link
y este link
lo que va a hacer
es como funcionar
como anchor
pero haciendo
una navegación
con spa
le voy a decir
el href
que en este caso
lo voy a
en realidad
lo voy a crear
que es detail
id
vale
cerramos esto aquí
y ahora aquí
voy a utilizar
un anchor
pero sin href
esto es una cosa
que tiene en el contrato
el componente
de next yes
porque
el link
solo puede envolver
un elemento
vale
así que por eso
vamos a utilizar
el anchor
le vamos a dar unos estilos
eso sí
que no se me olvide
por ejemplo
el hover
pues vamos a hacer
que tenga
un vgblue
300
vamos a darle
un poquito de padding
o podemos hacer
si
vamos a hacer
que esto tenga
un flex
gap
4
y
un poquito
de padding
vale
con esto ahora
pues tendríamos
la imagen
vamos a hacer
que la imagen
tenga el title
image
el class name
igual es demasiado
grande
de 8
o incluso
vamos a probar
de 12
un poquito más grande
y vamos a hacer
que la imagen
utilice el object contain
vale
el object contain
es una cosa
que lo que le dice
es que utilice
el espacio
y que contenga
la imagen
no que la estire
y le haga
cosas extrañas
vale
tendríamos la imagen
por un lado
así que
ahora
vamos a poner
al otro lado
a la derecha
vamos a ponerle
por un lado
el título
y por otro lado
el precio
vale
text sm
text ss
bueno vamos a ver
como queda
y si no queda
de una buena forma
lo cambiaremos
venga vamos a ver
ahora
sudadera
vale
puedes ver que
funcionar funciona
el problema es que
se me queda
encima
por ejemplo
xbox
y aquí
se me queda
encima
por qué
me está pasando
esto
bueno esto
es un momento
antes de terminarlo
antes de terminarlo
vamos a
veo que el form
en realidad
al final
no lo hemos utilizado
para nada
así que igual
lo podríamos quitar
o igual
lo podemos dejar
por ahora
es que de hecho
importante
claro
estos ref
sí que se utilizan
pero no los estamos
inicializando
así que
voy a arreglarlo
esto también
ref
form
ref
el input
ref
input
ref
y el panel
el panel
sí
este sí que lo he hecho
vale
vale
voy a guardar los cambios
a ver
aquí teníamos el absolute
pero aquí este absolute
aquí le falta bastante estilo
esto es que me he fiado
antes de que jacopai
lo que he dicho
sí
tú pon aquí lo que tú quieras
vale
que es absolute
es absolute
vamos a ponerle
que el top
se es 0
y el left
es 0
vale
para que nos lo estile
justamente
o sea
nos lo coloque
donde debe ser
que lo coloque
le vamos a dar un borde
y le vamos a poner un color
un poco así
para que se diferencie mejor
y entiendo que también
vamos a tener que poner
un z index
así que vamos a poner aquí
un z index
no sé si ponérselo
yo creo que ahí
debería estar bien
vamos a verlo
vale
ahora el problema
como puedes ver
es que sale muy arriba
esto es porque
no le hemos puesto
en ningún sitio
el relative
que necesitábamos
ves que aquí
he cerrado aquí el div
y este relative
se ha quedado por aquí
nada
es que este div
lo vamos a tener que cerrar
más abajo
más abajo
aquí
y ahora sí que va a tener
más sentido
ahora el problema
que tenemos
es que se pone encima
pero bueno
al menos ya empieza a tener
mejor pinta
vale
mejor pinta
también le vamos a poner
un overflow
pero a ver
vamos a ponerle
un margen
de 16
vamos a poner ahora
vale
esto ahora ya queda mejor
y
el tema este
vamos a ponerle
también un overflow
hidden
guarda los cambios
ahora sí que
queda bien
ahora sí que queda bien
vale
de hecho vamos a hacerlo
más grande
para que se vea
bien bonito
vale
igual incluso
lo podríamos hacer
más grande
así que vamos a
traernoslo para aquí
y así lo vemos
con las dos columnas
y funcionando
a pleno rendimiento
si ahora buscas
xbox
porque lo tendríamos
ya estaría buscando
correctamente
poco
y aquí lo tendríamos
también
y de esta forma
también
bueno esto
te lo dejo como deberes
porque tienes en la descripción
el repositorio
pero lo que podrías hacer
por ejemplo
es que aquí
siguiese apareciendo
la búsqueda
aquí en este caso
lo único que hemos hecho
es que desde la home
te lleva a un sitio
pero fíjate
lo rápido
lo rápido que es
es súper súper rápido
y se le podrían hacer
un montón de cosas más
por ejemplo
pues mostrar aquí
las últimas búsquedas
que habías hecho
o búsquedas sugeridas
se le pueden crear plugins
bueno
si te gustaría
que hiciese más cosas
sobre esto
pues déjamelo
en los comentarios
y seguramente
iteraremos más
nuestro buscador
con autocompletado
que fíjate
lo hemos hecho
en un momento
de forma totalmente
gratuita
y tirando de una API
totalmente externa
lo cual es genial
así que espero
que te haya gustado
mucho
este proyectazo
que tiene Algolia
con su biblioteca
para hacer autocomplete
y nos vemos
en el siguiente vídeo
hasta luego
chao
¡Gracias!