Faltará el archivo de hoja de estilo (asstyle.css), pero no es necesario pra ver el código y que sea completamente funcional. Aquí va:
1.- El script de búsqueda:
Código: Seleccionar todo
<script type="text/javascript">
<!--
function buscar2 () {
var f = document.forms['formBuscador'];
var palabra1 = f.Palabra.value;
var buscador1 = f.Buscador.options[f.Buscador.selectedIndex].value;
var cadena;
var st = document.formBuscador.Palabra.value;
patron =/[`"'@/\|<>!?/]/; // Añade todos los caracteres no aceptados
if ( patron.test(st) ) {
alert("Lo siento, no se aceptan esos caracteres.");
formBuscador.Palabra.value="";
formBuscador.Palabra.focus();
} else {
if (palabra1 == "") {
// alert ("No has indicado lo quieres buscar.");
formBuscador.Palabra.focus();
formBuscador.Palabra.value="";
} else {
if (buscador1 == "1") {
alert ("Por favor, indica un buscador.");
formBuscador.Palabra.focus();
formBuscador.Palabra.value="";
} else {
if (palabra1.length < 3) {
alert ("Por favor, introduce al menos tres caracteres.");
formBuscador.Palabra.focus();
formBuscador.Palabra.value="";
} else {
cadena = buscador1 + palabra1;
IrA(cadena);
}
}
}
}
}
function IrA (cadena) {
ventana=window.open(cadena); //quito frame "contenidos" para que fundione en Windows
}
// -->
</script>
Este script de JavaScript es un buscador personalizado que toma una entrada del usuario y la busca en un buscador seleccionado. Aquí está el desglose paso a paso:
Función buscar2: Esta es la función principal que se llama para realizar la búsqueda.
- Primero, obtiene el formulario ‘formBuscador’ y extrae el valor de la entrada ‘Palabra’ y el valor del buscador seleccionado.
- Luego, verifica si la entrada del usuario contiene caracteres no aceptados. Si es así, muestra una alerta y borra la entrada.
- Si la entrada no contiene caracteres no aceptados, verifica si la entrada está vacía. Si es así, pone el foco en el campo de entrada y lo borra.
- Si la entrada no está vacía, verifica si el usuario ha seleccionado un buscador. Si no es así, muestra una alerta, pone el foco en el campo de entrada y lo borra.
- Si se ha seleccionado un buscador, verifica si la entrada tiene al menos tres caracteres. Si no es así, muestra una alerta, pone el foco en el campo de entrada y lo borra.
- Si todas las condiciones anteriores se cumplen, concatena el valor del buscador y la entrada del usuario para formar una cadena y llama a la función ‘IrA’ con esta cadena.
2.- El div o capa con el formulario de búsqueda:
Código: Seleccionar todo
<div id="formBuscador">
<!-- <h3>Buscadores:</h3> -->
<form name="formBuscador" method="GET" action="javascript:buscar2(); target="_top"">
<select class="frm" size="1" name="Buscador" onchange="document.formBuscador.Palabra.focus();">
<option value="https://indaga.net/?s=" />Directorio INDAGA (2020)</option>
<option value="https://duckduckgo.com/?q=" /> DuckDuckGo
<option value="https://www.puntocomunica.com/?s=" /> Puntocomunica 2.0
<option value="http://archive.org/search.php?query=" /> Archive.org
<option value="http://www.bing.com/search?q=" /> Bing
<option value="https://www.google.es/#q=" /> Google España
<option value="http://es.search.yahoo.com/search?p=" /> Yahoo! España
<option value="https://twitter.com/search?q=" /> Buscar en Twitter
<option value="https://www.facebook.com/search/top/?q=" /> Buscar en Facebook
<option value="https://pixabay.com/es/photos/?q=" /> Imágenes en Pixabay
<option value="https://www.flickr.com/search/?q=" /> Imágenes en Flickr
<option value="https://www.youtube.com/results?search_query=" /> Vídeos en Youtube
<option value="https://www.gutenberg.org/ebooks/search/?query=" target="_top" /> ebooks sin copyright (Proyecto Gutenberg)
</select>
<input type="text" style="width:250px;height:15px" name="Palabra" /><br /><br />
<input type="submit" class="btn" name="submit" value="Buscar" onclick="buscar2();"/>
<input type="reset" class="btn" value="Restablecer" name="delete" onclick="document.formBuscador.Palabra.focus();" />
</form>
</div>
Explicación del formulario de búsqueda:
Este es un formulario HTML que interactúa con el script de JavaScript. Aquí está el desglose paso a paso:
1.- <div id="formBuscador">: Este es un contenedor que envuelve todo el formulario.
2.- <form name="formBuscador" method="GET" action="javascript:buscar2(); target="_top"">: Este es el formulario que contiene todos los elementos interactivos. Cuando se envía el formulario, se llama a la función buscar2() del script de JavaScript.
3.- <select class="frm" size="1" name="Buscador" onchange="document.formBuscador.Palabra.focus();">: Este es un menú desplegable que permite al usuario seleccionar un buscador. Cuando se selecciona un buscador, el foco se mueve automáticamente al campo de entrada Palabra.
4.- <option value="https://indaga.net/?s=" />Directorio INDAGA (2020)</option>: Estas son las opciones del menú desplegable. Cada opción representa un buscador diferente. El valor de cada opción es la URL del buscador, que se utilizará en la función buscar2().
5.- <input type="text" style="width:250px;height:15px" name="Palabra" />: Este es el campo de entrada donde el usuario puede escribir lo que quiere buscar.
6.- <input type="submit" class="btn" name="submit" value="Buscar" onclick="buscar2();"/>: Este es el botón de envío. Cuando se hace clic en él, se llama a la función buscar2().
7.- <input type="reset" class="btn" value="Restablecer" name="delete" onclick="document.formBuscador.Palabra.focus();" />: Este es el botón de restablecimiento. Cuando se hace clic en él, se borra el campo de entrada y se pone el foco en él.