Página de búsqueda de scripts en javascript. Busque la página usando jQuery. Campo de búsqueda desplegable

Recientemente hice una búsqueda de páginas usando jQuery. Mientras descubría la mejor manera de hacerlo para que fuera óptimo para navegar por el contenido de la página, terminé con 2 opciones de búsqueda. Como resultado, la segunda opción se adaptaba mejor a mis necesidades, pero hoy les hablaré de ambas.

En la primera opción, la búsqueda se realizará utilizando todas las palabras (símbolos) de una determinada parte del documento. En la segunda opción, la lista de palabras se especifica inicialmente; a medida que ingresa caracteres en la barra de búsqueda, se sugerirán las palabras que los contienen. Una especie de consejos de búsqueda.

1ra opción

Conectamos la biblioteca jQuery, el complemento de resaltado responsable de buscar y resaltar valores coincidentes en el texto, y un script que procesará las consultas de búsqueda. El script se ejecuta al hacer clic en un elemento con id="enviar".

$(documento).ready(function())( $("#submit").click(function())( var term = ""; var n = "0"; $("body").removeHighlight() ; $ ("p.resultados").hide().empty(); término = $("#term").attr("valor"); if($("#term").val() == "" )( $("p.results").fadeIn().append("Ingrese la consulta de búsqueda en el campo de arriba"); return false; )else( $(".main").highlight(term); n = $( "span.highlight").length; if(n == 0)( $("p.results").fadeIn().append("No encontrado"); )else( $("p.results" ).fadeIn().append("Encontrado: "+n+" coincidencias."); ) devuelve falso; ) )); ));

variable término— obtiene el valor de la consulta de búsqueda;
variable norte— responsable del número de coincidencias encontradas;
función eliminarResaltar()— elimina resultados de búsqueda anteriores;
función esconder()— oculta el bloque con información sobre los resultados de la búsqueda;
función vacío()— elimina el contenido del bloque de resultados de búsqueda;
función fundirse()— hace visible el bloque con información sobre los resultados de la búsqueda;
función adjuntar()— agrega contenido al bloque con información sobre los resultados de búsqueda;
función destacar()— enmarca todas las palabras que coinciden con la consulta de búsqueda en una etiqueta span con clase = “resaltado”;
propiedad longitud— devolverá el número de coincidencias encontradas en la página.

Entre etiquetas cuerpo debe insertar un formulario para ingresar consultas de búsqueda, un contenedor para mostrar información sobre los resultados de la búsqueda y un bloque con una clase principal dentro del cual se realizará la búsqueda.

Contenido

2da opción

Incluimos un archivo con estilos, una interfaz de usuario jQuery: widget de autocompletar, la biblioteca jQuery, el complemento de resaltado responsable de buscar y resaltar valores coincidentes en el texto y un script que procesará las consultas de búsqueda.

$(función() ( var etiquetas disponibles = [ "ActionScript", "BASIC", "C++", "Delphi", "Java", "JavaScript", "Pascal", "PHP", "Python", "Ruby", "Visual Fortran" ]; $("#tags").autocomplete(( fuente: etiquetas disponibles )); )); $(document).ready(function())( $("#submit").click(function())( var term = "#"; var tags = ""; $("body").removeHighlight() ; if ($("#tags").val() != "") ( término += $("#tags").val(); etiquetas = $("#tags").attr("valor" ); ) $("h3").highlight(tags); ubicación.href = term.toLowerCase(); )); ));

variable término– es responsable de generar un enlace a un marcador, comienza con el símbolo #, luego viene el nombre del marcador (el valor de la consulta de búsqueda);
variable etiquetas– obtiene el valor de la consulta de búsqueda;
función a minúsculas()— convierte la cadena a minúsculas;

En este caso, la búsqueda se realizará únicamente por elementos de la matriz. disponibleEtiquetas dentro de las etiquetas h3. El script genera un enlace al marcador y después de hacer clic en el botón de búsqueda, va a la etiqueta con la identificación especificada.

Busque la página usando jQuery: y .

Eso es todo, si alguien tiene alguna pregunta sobre cómo funcionan los scripts, puede preguntarla en los comentarios. Intentaré responder.

Si escribe "pregunta" en el campo y hace clic en el botón "Buscar", la dirección de la página cambiará de "http://site/2011/06/forma-poiska-po-saitu..html?text=question" , ya que esto sucede cuando haces clic en el enlace. Cuando se carga la página, el script verifica la presencia de los parámetros especificados en la URL y, si los detecta, genera y muestra resultados de búsqueda para el sitio.

Pero para aumentar la velocidad de carga del documento, el script que procesa la solicitud generalmente se coloca solo en una página del sitio, a la que se realizará la transición si su dirección se especifica en el atributo de acción: " http:// sitio/búsqueda/?text=pregunta "

Para que el script funcione, es posible que se necesiten parámetros adicionales, que se especifican en . Este campo no se muestra.?searchid=808327 &text=question".

Puedes usar

• ofrecido por servicios especiales de Yandex y Google,
• integrado en el CMS utilizado (si está disponible), por ejemplo, en Blogger en "https://site.ru/search?q=vopros", donde "site.ru" se reemplaza con la dirección de su blog,
• desarrollado de forma independiente, por ejemplo, en PHP.

La opción más sencilla es redirigir la solicitud a Google:>

Hola queridos lectores del blog LifeExample, todos utilizamos la búsqueda de páginas electrónicas en nuestros navegadores web usando las teclas de acceso rápido CTRL+F o F3. Y parece que no podemos escapar de esos privilegios, ya que muchas veces no tenemos tiempo para leer por nuestra cuenta todo el contenido de la página. El problema es que no todos los usuarios novatos conocen estas capacidades ocultas de cualquier navegador, pero se les puede ayudar instalando una búsqueda de páginas JavaScript casera en aquellos proyectos en los que no pueden prescindir de ella.

La búsqueda de páginas puede ser necesaria para páginas que proporcionan una gran cantidad de datos, incluidas tablas y listas. Observo que esta necesidad surge cuando el contenido de la página es estático y no se genera a partir de la base de datos.

Será más conveniente buscar la información necesaria en la página si implementa la interfaz adecuada para ello:

En el campo debe ingresar una palabra de búsqueda y hacer clic en el botón "Buscar", aquí todo es intuitivo. Pasemos a la implementación del propio mecanismo de búsqueda de páginas y veamos qué matices puede haber a la hora de implementarlo.

¿Cómo buscar una palabra en una página?
Necesitamos verificar la exactitud de los datos ingresados; en nuestro caso, solo cortaremos los espacios en blanco a los lados de la frase de búsqueda y también simplemente verificaremos el formulario en sí para ver si hay una consulta de búsqueda en él.
Dado que los datos son estáticos y se almacenan únicamente en el DOM de la página, la búsqueda se realizará precisamente de acuerdo con el contenido del DOM (Document Object Model).
Lo importante es mostrar al usuario todos los resultados que encontró nuestra búsqueda en JavaScript. Aquellos. resalte el fondo debajo de las partes encontradas del contenido de la página.
Dado que este módulo de búsqueda de mini páginas tiene sentido conectarse solo a páginas grandes que tienen desplazamiento, entonces, si hay una frase encontrada en algún lugar fuera de la vista, sería una buena idea desplazarse hasta el elemento encontrado.
La reutilización de la búsqueda también es un punto importante en el funcionamiento de este script. Porque resaltar las partes encontradas es el resultado de cambiar el contenido del objeto DOM, luego cada ciclo de búsqueda posterior debe sobrescribir los resultados del anterior y devolver el contenido de la página a su forma original, para cambios adicionales en la nueva iteración.
Bueno, eso parece ser todo, en pocas palabras. A pesar del volumen de puntos resaltados, su implementación no requiere mucho tiempo ni espacio en el código; aquí hay un script listo para usar para el mecanismo de búsqueda de páginas de JavaScript:

var lastResFind=""; // último resultado exitoso
var copy_page=""; // copia de la página en su forma original
función TrimStr(s) (
s = s.reemplazar(/^s+/g, "");
return s.replace(/s+$/g, "");
}
función FindOnPage(inputId) (//busca texto en la página, el ID del campo de entrada se pasa al parámetro
var obj = ventana.document.getElementById(inputId);
var textoParaBuscar;

Si (objeto) (
textToFind = TrimStr(obj.value);//recortar espacios
) demás (
alert("La frase ingresada no fue encontrada");
devolver;
}
si (textToFind == "") (
alert("No has ingresado nada");
devolver;
}

Si(document.body.innerHTML.indexOf(textToFind)=="-1")
alert("No se encontró nada, ¡verifique su entrada!");

Si(copiar_página.longitud>0)
document.body.innerHTML=copiar_página;
else copy_page=document.body.innerHTML;

Document.body.innerHTML = document.body.innerHTML.replace(eval("/name="+lastResFind+"/gi")," ");//borrar anclajes de desplazamiento anteriores
document.body.innerHTML = document.body.innerHTML.replace(eval("/"+textToFind+"/gi")," "+texto para buscar+""); //Reemplazar el texto encontrado con enlaces anclados;
lastResFind=textoParaBuscar; // guarda la frase de búsqueda para que en el futuro podamos borrar todos los enlaces que la utilicen
window.location = "#"+textToFind;//desplácese hasta la última coincidencia encontrada
}


Búsqueda de páginas JavaScript



Ingrese una palabra o frase para buscar.

Así es como se ve un ejemplo del uso del script:

En cuanto a los comentarios sobre el código, probablemente sean innecesarios aquí, ya que están presentes dentro del script. Lo único que puede resultar difícil para los principiantes es comprender el significado de las expresiones regulares al recortar espacios. Aconsejo a cualquiera que necesite ayuda que lea el artículo correspondiente sobre expresiones regulares.

Implementada en este artículo utilizando el lenguaje JavaScript, la búsqueda de páginas es válida en todos los navegadores, incluido Internet Explorer.

El campo de búsqueda de un sitio web es uno de los elementos de la interfaz de usuario más importantes de una página web. Con su ayuda, el usuario puede encontrar el contenido deseado en su sitio.

En este tutorial, aprenderá cómo crear marcas de campos de búsqueda usando HTML5, así como también cómo diseñar elementos de formulario usando el poder de CSS3, sin usar scripts.

El elemento es un contenedor para un formulario de búsqueda, se crea un campo de búsqueda usando un elemento o y se puede crear un botón para enviar datos al servidor usando un elemento o.

¿En qué se diferencia de? Ambos campos crean un campo de texto de una sola línea para la entrada de texto, pero type="search" se agrega al estándar HTML5 y es una sugerencia semántica para los navegadores. Todos los navegadores, excepto Mozilla Firefox, añaden una cruz de limpieza al campo. Para eliminarlo, puede cambiar el tipo de campo a type="text" .

¿En qué se diferencia de? No hay diferencia en la acción de los botones de envío creados con el primer o segundo método. La diferencia es que el elemento es un contenedor, por lo que en su interior se pueden colocar otros elementos, como imágenes o iconos.

Puede agregar texto a los campos del formulario de dos maneras:
1)
El color del texto mostrado será gris. Usando las siguientes reglas, puede configurar el texto de información sobre herramientas en cualquier color, cambiar el estilo y el fondo del campo. Estos selectores no se pueden combinar en una sola regla; de lo contrario, no funcionarán.

Entrada::-webkit-input-placeholder (color: #B6C0A5; estilo de fuente: cursiva; fondo: #E0EFCA; ) entrada:-moz-placeholder (color: #B6C0A5; estilo de fuente: cursiva; fondo: #E0EFCA; ) entrada:-ms-input-placeholder (color: #B6C0A5; estilo de fuente: cursiva; fondo: #E0EFCA;)

2)
El color del texto mostrado será negro. Puede establecer su color usando la propiedad de color, por ejemplo:

Entrada (color: blanco;)

Para mostrar iconos, no olvides conectarte.

El campo de búsqueda aparece al hacer clic en el botón con el icono.

* (tamaño de caja: cuadro de borde;) formulario ( posición: relativa; ancho: 300 px; margen: 0 auto; altura: 42 px; ) entrada ( altura: 42 px; ancho: 0; relleno: 0 42 px 0 15 px; borde: ninguno; borde inferior: 2px sólido transparente; contorno: ninguno; fondo: transparente; transición: .4s cúbico-bezier(0, 0.8, 0, 1); posición: absoluta; arriba: 0; derecha: 0; índice z : 2; ) entrada:enfoque (ancho: 300px; índice z: 1; borde inferior: 2px sólido #F9F0DA; ) botón (fondo: #683B4D; borde: ninguno; alto: 42px; ancho: 42px; posición: absoluta ; arriba: 0; derecha: 0; cursor: puntero; ) botón:antes ( contenido: "\f002"; familia de fuentes: FontAwesome; tamaño de fuente: 16px; color: #F9F0DA; )

Respuesta actualizada:

Al principio no entendí que deseas abrir una página web que no controlas y luego usar JavaScript en tu navegador para interactuar con ella.

La información de la respuesta original a continuación sigue siendo relevante, pero la pregunta es: ¿cómo hago para que el código funcione en el contexto correcto? Y la respuesta: hay al menos dos formas:

Cualquier navegador decente hoy en día tiene herramientas de depuración integradas. Mire el menú para verlas, pero en muchos navegadores se puede acceder a ellas mediante la tecla F12 o Ctrl + Shift + I. En estas herramientas encontrará una "consola" donde puede ingresar JavaScript y ejecutarlo en el contexto de la página. estás mirando.

Esto es excelente para hacer cosas de forma interactiva, pero es un poco complicado repetirlo cada vez. También puedes poner el código en un archivo local (por ejemplo, /home/tjc/foo.js) y luego, cuando vayas a la página, usar la consola para agregar ese script a la página (lo que hará que se ejecute en el archivo local). contexto de la página). Por ejemplo:

Document.documentElement.appendChild(document.createElement("script")).src = "file:///home/tjc/foo.js";

Una vez que su secuencia de comandos haga lo que desea, puede convertirla en un marcador. Este es un marcador del navegador que utiliza el esquema javascript: en lugar del habitual http: etc. Vea el enlace para más detalles. Necesitará una herramienta que tome su código JavaScript y realice la codificación de URL necesaria por usted, como Bookmarklet Crunchinator o similar.

Respuesta original:

Entonces encontrará el texto u obtendrá el elemento por id/clase...

Estas son tres preguntas muy diferentes:

Para buscar texto en una página, tiene varias opciones:

• Si solo desea encontrar el texto pero no le importa qué elemento lo contiene, puede mirar internalHTML en document.body. internalHTML - cadena; cuando accede a él, el navegador crea una cadena HTML para todos los elementos DOM en el elemento al que lo llama (y sus descendientes). Tenga en cuenta que este no es contenido original del servidor; esto se crea sobre la marcha cuando se accede al elemento. Para muchos casos de uso, obtener esta cadena y luego mirarla puede resultar útil. Tenga en cuenta que el texto que está viendo es un marcado, por ejemplo, si buscó la palabra "mesa", puede encontrarla en una oración ("Nos sentamos a la mesa") o en un marcado (

  ...).

  A continuación se muestra un ejemplo de cómo contar la palabra "Estoy" en una página usando InnerHTML: Live Copy

  (función() ( var pageText = document.body.innerHTML; display("Recuento de "I\"m" en la página: " + pageText.match(/I"m/g).length); display de función(msg ) ( var p = document.createElement("p"); p.innerHTML = String(msg); document.body.appendChild(p); ) ))();

  Si necesita averiguar en qué elemento se encuentra exactamente, deberá escribir una función recursiva que recorra los nodos de la página y, para Texto, mire el texto que contiene. Aquí hay un ejemplo básico (la función es la función de caminar): Live Copy | - ver nota sobre ejemplos al final.

  (función() ( var coincidencias = , índice; walk(coincide, document.body, ""); función walk(coincide, nodo, ruta) ( var child; switch (node.nodeType) ( caso 1: // Elemento para (child = node.firstChild; child; child = child.nextSibling) ( walk(matches, child, path + "/" + node.tagName); ) break; caso 3: // Texto if (node.nodeValue.indexOf( "Yo"m") !== -1) (matches.push("Lo encontré en " + ruta); ) break; ) ) display("Coincidencias encontradas (" +matches.length + "):"); para (índice = 0; índice< matches.length; ++index) { display(matches); } function display(msg) { var p = document.createElement("p"); p.innerHTML = String(msg); document.body.appendChild(p); } })();

  Para encontrar un elemento en el uso de identificación de página

  • hogar
  • Teclado
  • Página de búsqueda de scripts en javascript. Busque la página usando jQuery. Campo de búsqueda desplegable
  Publicaciones relacionadas

  • 
    Revisión de JBL Xtreme: elección difícil Duración de la batería
  • 
    Cómo abrir (editar) un archivo PSD sin Photoshop
  • 
    Qué hacer si el disco duro cruje y traquetea
  • 
    Cómo configurar Internet móvil MTS sin problemas