Función de búsqueda completa en la página html.

Recientemente he estado trabajando en un marco que ha sido modificado por muchas personas. Me siento mareado cuando miro el código todos los días, pero siento que he logrado un gran progreso para ver. Los diferentes rangos de datos de las dos bibliotecas están bastante bien. Lo saqué para compartirlo ese día. Hoy hablaré sobre una función en la que he estado trabajando en los últimos días, que es la función de búsqueda. páginas html.

Esta función se utiliza principalmente para ingresar caracteres en el cuadro de búsqueda y luego presionar los botones anterior y siguiente para marcar automáticamente los caracteres coincidentes en el área de consulta con un estilo especial. Después de eso, puede continuar presionando los botones anterior y siguiente para. busque en orden. Haga coincidir los caracteres y use otro patrón para distinguir el carácter actualmente coincidente de otros caracteres coincidentes.

La pantalla frontal probablemente se vea así:

El html es así:

 <div class=container style=z-index: 999 id=searchDiv> <div class=keyword-search> Buscar: <input id=key type=text style=width: 200px placeholder=keyword/> <a href= javascript; :void(0); class=prev onclick='wordSearch(1)'><i clase=c-icon></i></a> <a href=javascript:void(0); class=siguiente onclick='wordSearch()'><i class=c-icon></i></a> </div> </div>

código de secuencia de comandos:

 <script>//Función de búsqueda var oldKey0 = ; var index0 = -1;var oldCount0 = 0; var newflag = 0; var currentLength = 0; ; //Obtener el valor de la clave if (!key) { return; //Salir si la clave está vacía} getArray(); focusNext(flg } function focusNext(flg) { if (newflag == 0) {//Si hay una nueva búsqueda, se borra el índice index0 = 0; } if (!flg) { if (oldCount0 != 0) {//Si todavía hay una búsqueda if (index0) < oldCount0) {// Si no has terminado de caminar por la izquierda, ve a la izquierda focusMove(index0); index0++; } else if (index0 == oldCount0) {//Has terminado de caminar index0 = 0; ); index0++; } else { index0 = 0;// FocusMove indeterminado (index0++; index0++; } } } else { if (oldCount0! = 0) {// Si todavía hay búsqueda if (index0 <= oldCount0 && index0 > 0) {//Si no has terminado de caminar por la izquierda, ve a la izquierda index0--; focusMove(index0); else if (index0 == 0) {//Has terminado de caminar index0 = oldCount0; index0-- focusMove(index0); } } } } función getArray() { newflag = 1; $(.contrast .result).removeClass(res) = $(#key).val(); /Obtener valor de clave if (!key) { oldKey0 = ; //Salir si la clave está vacía} if (oldKey0 != key || $(.current).length != longitud actual) { //Restablecer index0 = 0; var index = 0; $(.contrast .result).each(function () { $(this).replaceWith($(this).html()); } ) ; pos0 = nueva matriz(); if ($(.contrast-wrap).hasClass(current)) { currentLength = $(.current).length; .contrast).each(function () { $(this).html($(this).html().replace(new RegExp(key, gm), <span id='resultado + (index++) + ' class= 'resultado'> + clave + </span>)); // Reemplazar } } else { $(.contrast-wrap).addClass('currentLength = $(.current).length; $(.contrast).each(function () { $(this).html($(this).html().replace(new RegExp(key, gm), <span id= 'resultado + (index++) + ' class='resultado'> + clave + </span>)); // Reemplazar } } //$(#clave).val(clave); //$(.contrast .result).each(function () { // $(this).parents('.contrast-wrap').addClass('current'); // pos0.push($(this) .offset().top); //}); // pos0.push($(.contrast .resultado:eq(2)).offset().top - $(.contrast .resultado:eq(2)).parents(.contrast).offset().top); oldCount0 = $(.contrast .result).length; newflag = 0; .resultado:eq( + index0 + )).parents('.contrast-wrap').addClass('current'); $(.contrast .resultado:eq( + index0 + )).addClass(res var top = $(.contrast .resultado:eq( + index0 + )).offset().top + $(.contrast .resultado); :eq( + index0 + )).parents(.contrast).scrollTop(); var intop = top - $(.contrast). .resultado:eq( + index0 + )).parents(.contrast).offset().top; $(.contrast .resultado:eq( + index0 + )).parents(.contrast).animate({ scrollTop: intop }, 200); si ($(.contraste .resultado:eq( + index0 + )).parents(.contrast).scrollTop() == 0) { $(html, body).animate({ scrollTop: top - 200 }, 200} else { $(html, body).animate({ scrollTop: $(.contrast .resultado:eq( + index0 + )).parents(.contrast).offset().top - 200 }, 200); cada(función () { $(this).replaceWith($(this).html()); }); oldKey0 = } });

Primero, borre los últimos resultados de la consulta y luego use expresiones regulares para agregar un estilo especial a todos los caracteres coincidentes en el área según el valor clave. Por ejemplo, se agrega al método una etiqueta span con un nombre de clase de resultado. use la variable odKey0 para registrar el valor de la clave (Compare primero la próxima vez que ingrese. Si son iguales, significa que debe mirar el contenido siguiente o anterior, por lo que no necesita usar expresiones regulares al ingresar. oldCount0 registra el número total de consultas). y newflag se establece en 0 (si no es la primera vez) Consulta newflag es 1).

Luego ingrese el método getNext. flg indica si el usuario presionó el botón anterior o siguiente. Use index0 para registrar qué carácter coincidente se ve actualmente. Compárelo con oldCount0 para determinar si debe aumentar o disminuir o establecerse en 0 (si es mayor que). oldCount0 o menos de 0, tienes que empezar de nuevo).

El método focusMove es una operación que posiciona la página en el elemento actual.

Selector eq(): el selector selecciona elementos con un valor de índice específico. Por ejemplo: $(.contrast .result:eq(1)) selecciona el segundo elemento llamado resultado en el elemento cuyo nombre de clase es contraste.

Método padres (): todos los elementos padres del elemento. $(p).parents('.contrast-wrap') , todos los elementos denominados contraste-wrap del elemento p.

Método reemplazar (): reemplaza el elemento seleccionado con el contenido html especificado. Tenga en cuenta que los elementos del elemento seleccionado también se reemplazan.

Método offset(): Devuelve o establece el desplazamiento (posición) del elemento coincidente en relación con el documento.

Método scrollTop(): Devuelve o establece la posición vertical de la barra de desplazamiento del elemento coincidente.

Lo anterior es la función de búsqueda en la página HTML que le presenta el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!