Input para crear y direccionar una URL con JavaScript
Muchas veces tenemos un sitio web con una casilla de búsqueda (INPUT) y deseamos agregar esta palabra a la creación de una URL, lo usual es hacerlo enviando la palabra como un parámetro de URL y recoger la variable con $_GET de php, pero si ya sabemos cómo va la dirección en su estructura, es mejor crearla en el mismo buscador y redireccionar la página a la nueva dirección de destino.
Pero, veamos qué objetivos buscamos:
- Ingresar un texto.
- Bajar el texto a minúsculas.
- Retirar los acentos o tildes.
- Crear una nueva URL.
- Redireccionar automáticamente.
Usaremos Javascript:
<form>
<input id="text" type="search" placeholder="ingrese texto" />
<button onclick = "ir()" type="submit">Buscar</button>
</form>
<script>
function ir() {
var url= "https://www.deperu.com/productos/categoria-" + document.getElementById("text").value.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "") + "/";
setTimeout(function(){window.location = url;}, 0);
}
</script>
Demo: Buscador de productosTengan en cuenta que se ha usado setTimeout para dar un tiempo cero en la redirección, lo que se podría aprovechar para colocar antes un document.write e imprimir un texto, dándole un tiempo extra para que se visualice bien.
<script>
//...
document.write("Será direccionado en 3 segundos...");
setTimeout(function(){window.location = url;}, 3000);
//...
</script>
Basado en el artículo: JavaScript | Redirect a URL, y optimizado para llevar solo minúsculas y eliminar los acentos.
Comentarios
Publicar un comentario