Buscador dinámico para página web

Hoy vuelvo con un nuevo proyecto en Javascript y es que este lenguaje de programación permite generar webs dinámicas y diferentes con un poco de código y de imaginación.

Personalmente me encanta investigar en internet, pinterest, awwwards,… en busca de cosas que pueda aplicar en una web. Evidentemente, no lo puedo poner todo de golpe, pero en determinadas ocasiones una idea de formulario, de menú o en este caso, de buscador, puede marcar la diferencia con la competencia. Creo que es genial para llamar la atención y esto es muy interesante en tiendas online. La idea de este buscador nace de un proyecto reciente en el que quería destacar la gran variedad de productos que fabrica la empresa.

A continuación, y sin más dilación, os dejo el buscador dinámico (aunque tengo que retocar el CSS para que se ajuste). Solo pongo el código de JS porqué tendréis que adaptar el código en función al tema de vuestro wordpress. En mi caso lo adapte a las clases que usa mi tema web «Avada», que por cierto es uno de los más populares en themeforest.

Mi idea era que el placeholder del buscador se fuera generando con texto nuevo de manera continua, en este caso he puesto términos que utilizo en mi página web pero podéis poner lo que queráis.

Como podéis ver la «suggestionList» es la variable que contiene las palabras que quiero mostrar y con la otra función, hace que el placeholder se cambie por el nuevo contenido y que este aparezca cada dos segundos.

Espero que os resulte curioso, os sirva de inspiración como a mí me han inspirado otros sitios web y ya iré compartiendo nuevos retos para crear páginas web diferentes, potentes y creativas.