JavaScript - Redireccionar a partir del resultado de una búsqueda

Redireccionar a partir del resultado de una búsqueda

Publicado por Rodrigo (7 intervenciones) el 16/11/2017 19:25:28

Buenas!

Estoy comenzando a aprender HTML, CSS y JavaScript. Necesito crear un buscador interno.

Pongamos un ejemplo: yo creo una página principal ("home"), una página concreta ("tigre") y una página de error ("error").

En la "home" aparece un buscador. El usuario realiza una búsqueda en dicho buscador. Si busca "tigre", quiero que se le envíe a la página "tigre" que yo he creado previamente. Si busca cualquier otra cosa, quiero que se envíe al usuario a la página "error". ¿Entendéis? Es el mismo sistema que usan los diccionarios online, por ejemplo.

En definitiva, que la búsqueda del usuario sea la que decida a qué dirección se le envía una vez hace click en el botón de buscar.

¿Alguien sabe cómo puedo lograrlo?

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 2

Val: 3.162

Redireccionar a partir del resultado de una búsqueda

Publicado por xve (2100 intervenciones) el 17/11/2017 08:02:18

Hola Rodrigo, para ello, lo que tienes que hacer es utilizar algún lenguaje de servidor como PHP para poder buscar entre los archivos los que coincidan con el nombre.
Si lo quieres hacer con javascript, tendrás que tener un array con las paginas que hay en el servidor, ya que javascript se ejecuta en el navegador y no puede leer los archivos de tu disco duro.

De que manera quieres hacerlo?

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Redireccionar a partir del resultado de una búsqueda

Publicado por Rodrigo (7 intervenciones) el 17/11/2017 20:05:00

Hola xve, muchas gracias por tu respuesta.

Me gustaría hacerlo con javascript. Hasta ahora lo estaba intentando realizar con una función if else, pero no lo consigo. ¿Cómo podría hacerlo con un array? Y una segunda pregunta: Para lograr lo que estoy intentando, debo tener mi web subida a un servidor, no? Es decir, no va a funcionar si estoy trabajando (por el momento) con los archivos locales de mi ordenador.

De nuevo, muchas gracias por tu ayuda! :)

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Redireccionar a partir del resultado de una búsqueda

Publicado por xve (2100 intervenciones) el 17/11/2017 21:37:05

Hola Rodrigo, aqui tienes el ejemplo con javascript:

<form>

	<input type="text" id="pagina">

	<input type="button" onclick="buscar()" value="buscar">

</form>

<script>

function buscar(e) {

	var paginas=Array("home","tigre");

	var pagina=document.getElementById("pagina").value;

	for(var i=0;i<paginas.length;i++) {

		if(pagina==paginas[i]) {

			window.location.href=pagina+".html";

			return;

	window.location.href="error.html";

</script>

No es necesario que tengas un servidor web, desde el mismo navegador te funcionara, ya que según entiendo, las paginas son todas con extensión .html, no?

Valora esta respuesta

Comentar

Redireccionar a partir del resultado de una búsqueda

Publicado por Rodrigo (7 intervenciones) el 18/11/2017 00:09:53

Funciona a la perfección. ¡Muchísimas gracias! Sí, todas las páginas son .html. Esto me ha servido de gran, gran ayuda.

Sólo me quedan un par de dudas:

1.¿cómo puedo programar que hacer click en "Enter" tenga el mismo resultado que hacer click en el botón buscar?

2. Si quiero guardar todas las páginas de resultado (p.ej. "tigre.html", "leon.html", "pantera.html"...) dentro de una carpeta llamada "animales", ¿qué tendría que añadir/cambiar al código?

Muchísimas gracias por tu ayuda, xve! :)

Valora esta respuesta

Comentar

Redireccionar a partir del resultado de una búsqueda

Publicado por Rodrigo (7 intervenciones) el 18/11/2017 00:29:36

Actualización
Creo que acabo de solucionar la segunda pregunta. Haciendo esto me funciona:

window.location.href="animales/"+pagina+".html";

¿Cómo lo ves?

Un saludo! :)

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Redireccionar a partir del resultado de una búsqueda

Publicado por xve (2100 intervenciones) el 18/11/2017 08:19:00

Sobre tu duda del botón al pulsar enter, podría ser así:

<form>

	<input type="text" id="pagina">

	<input type="submit" onclick="return buscar();" value="buscar">

</form>

<script>

function buscar(e) {

	var paginas=Array("home","tigre");

	var pagina=document.getElementById("pagina").value;

	for(var i=0;i<paginas.length;i++) {

		if(pagina==paginas[i]) {

			window.location.href=pagina+".html";

	window.location.href="error.html";

	return false;

</script>

Valora esta respuesta

Comentar

Redireccionar a partir del resultado de una búsqueda

Publicado por Rodrigo (7 intervenciones) el 18/11/2017 14:07:09

Genial, ya funciona a la perfección, muchas gracias una vez más.

La página que tengo para "león" me funciona a la perfección también, pero me pregunto si al subir mi web al servidor continuará funcionando debido al acento/tilde de la palabra. En un principio no debería haber ningún problema, ¿no?

También me gustaría que, cada vez que se acceda a la "home", la imagen de fondo cambie (tendría, por ejemplo, 3 modelos diferentes de imagen de fondo que irían rotando). Imagino que esto se podría realizar con Javascript, quizás con un Array?

Muchas gracias, xve!

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Redireccionar a partir del resultado de una búsqueda

Publicado por xve (2100 intervenciones) el 18/11/2017 21:34:57

La verdad es que nunca he utilizado paginas con acentos... yo creo que no te funcionara!!!

Si no te funciona, tendrás que crear un array bidimensional... algo así:

<form>

	<input type="text" id="pagina">

	<input type="submit" onclick="return buscar();" value="buscar">

</form>

<script>

function buscar(e) {

	var paginas=Array(

		["home","home.html"],

		["casa","home.html"],

		["tigre","tigre.html"],

		["león","leon.html"],

		["leon","leon.html"]

);

	var pagina=document.getElementById("pagina").value;

	for(var i=0;i<paginas.length;i++) {

		if(pagina==paginas[i][0]) {

			window.location.href=paginas[i][1];

			return false;

	window.location.href="error.html";

	return false;

</script>

De esta manera, puedes indicar varios textos para una misma url, por ejemplo home y casa van a la pagina home.html

Valora esta respuesta

Comentar

Redireccionar a partir del resultado de una búsqueda

Publicado por Rodrigo (7 intervenciones) el 18/11/2017 21:46:21

Hola xve!

Sí que me funciona, pero de todas formas he creado una función para que al escribir los acentos en el buscador se eliminen directamente. De esta forma, todo es mucho más práctico. También tenía problemas con las mayúsculas, ya que si alguien buscaba "Tigre" en lugar de "tigre" daba error, pero ya está solucionado también!

¿Alguna idea de cómo hacer que la imagen de fondo sea rotativa?

Muchas gracias crack!

:)

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Redireccionar a partir del resultado de una búsqueda

Publicado por xve (2100 intervenciones) el 18/11/2017 21:57:52

Hola Rodrigo, ya nos mostraras como lo has hecho!!!

Sobre el tema de la imagen, yo haría algo similar a lo de las paginas... un array con las imágenes, y con

Math.floor((Math.random() * imagenes.lenght));

Te devolverá un numero entre 0 y las imágenes que tengas en el array.

Valora esta respuesta

Comentar

Redireccionar a partir del resultado de una búsqueda

Publicado por Rodrigo (7 intervenciones) el 19/11/2017 14:22:54

Hola xve! Aquí te dejo el código que he usado para suprimir los acentos y convertir mayúsculas en minúsculas:

<script>

  function buscar(e) {

  	var paginas=Array("nomini2","oso","", "leon");

  	var pagina=document.getElementById("pagina").value;

    var paginx=pagina.toLowerCase();

    var paginxa = paginx.replace(/á/gi,"a");

    var paginxe = paginxa.replace(/é/gi,"e");

    var paginxi = paginxe.replace(/í/gi,"i");

    var paginxo = paginxi.replace(/ó/gi,"o");

    var paginxu = paginxo.replace(/ú/gi,"u");

  	for(var i=0;i<paginas.length;i++) {

  		if(paginxu==paginas[i]) {

  			window.location.href="vocabulario/"+paginxu+".html";

        return false;

  	window.location.href="error.html";

  	return false;

  </script>

Por otro lado, no consigo que alternar el fondo. ¿Se consigue únicamente a partir de un script? ¿Y cómo sería ese script?

Muchas gracias!:)

Valora esta respuesta

Comentar

Como asignar a un código qr ya existente una URL

Deshabilitar partes de formulario