Estoy trabajando en una función de búsqueda para mi proyecto ecom. Lo que estoy tratando de hacer es tomar los datos de una entrada en index.html y luego redirigir a search.html mientras aún puedo retener los datos, pero la página simplemente se vuelve a cargar y no aparece nada en el campo de la consola.
Estoy usando JavaScript estándar y me encuentro con algunos problemas.
Este es mi HTML
<form action="search.html"> <input type="text" placeholder="Search for products" id="search-query" /> </form>y este es mi JavaScript
document.getElementById("search-query").addEventListener("focus", function () { const search = document.getElementById("search-query").value; const searchResults = search.split(" "); console.log(searchResults); });Estoy usando el método de división porque quiero que cada palabra esté separada por una coma. Planeo implementar una función que muestre imágenes basadas en cada palabra, pero por ahora solo quiero que los resultados se registren en la consola para saber que no obtengo un resultado indefinido, pero nada de lo que intento parece estar funcionando.
Pude hacer que el código funcionara bien cuando solo estaba registrando el valor de la entrada, pero necesito una forma de redirigir a search.html , por lo que lo envolví en el form .
Cambie el detector de eventos a input y no focus , ya que el enfoque funcionará solo cuando la entrada esté enfocada y no en el valor de entrada del usuario.
Fragmento modificado:
const search = document.getElementById("search-query"); search.addEventListener("input", function () { const searchValue = search.value; const searchResults = searchValue.split(" "); console.log(searchResults); }); <form action="search.html"> <input type="text" placeholder="Search for products" id="search-query" /> </form>