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 productos

Tengan 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

Entradas populares de este blog

Superponer una imagen sobre otra con CSS

¿Ganas dinero en Facebook con Página, Grupo, Comunidad, etc?

Script para buscar palabras o textos en una página (html) con Jquery