Después de algunos meses sin publicar ningún post, y ya pasadas las vacaciones de verano, vuelvo con un tema que seguro que a los que trabajamos diseñando / desarrollando aplicaciones web nos han pedido los usuarios en más de alguna ocasión: Resaltar en la pantalla las palabras introducidas en una búsqueda.
En nuestro caso tenemos una página con un formulario de búsqueda con diferentes campos: una caja de texto (búsqueda por texto), dos campos de fechas (búsqueda por fechas) y una lista desplegable de países. Todos ellos se combinan en una consulta a la Base de datos y muestra un listado con los resultados. Dichos resultados se pueden ampliar en otra página pulsando sobre el registro correspondiente. Cómo os imagináis es en esta página de detalle donde se nos requirió que se resaltaran las palabras introducidas en la búsqueda.
Después de manejar varias opciones (resaltar en BBDD o en la propia aplicación, de manera que al navegador le llegaba el trabajo hecho), me decanté por hacerlo mediante javascript una vez que haya cargado todo el documento en la página. Para ello hemos incluido dentro del proyecto la librería jQuery (de la que ya os he hablado anteriormente) y de un plugin para ella que podéis consultar en http://bartaz.github.com/sandbox.js/jquery.highlight.html.
Básicamente esta librería contiene una función que se encarga de recorrer todas las palabras del contenedor (documento, div, table, etc.) que le especifiquemos y si encuentra alguna de las palabras utilizadas en la búsqueda y que le pasamos como parámetro la envuelve en una etiqueta <span class=»highlight»>:
<script type="text/javascript" src="/js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="/js/jquery-highlight.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("html").highlight(divide_string("<c:out value='${modelo.form.textoLibre}'/>"),{ wordsOnly: true });
});
</script>
Este código se ejecuta una vez que se ha cargado el documento y llama a la función highlight para que resalte las palabras dentro del elemento HTML del DOM. Asímismo le pasamos la opción wordsOnly:true para que resalte palabras completas (si en la búsqueda se introdujo ‘este’, que no resalte parcialmente Esteban). La función divide_string recibe el texto introducido en la caja de búsqueda y retorna un array de palabras, obviando palabras comunes como artículos y preposiciones. Aquí os paso el código:
function divide_string(cadena)
{
var pattern = "\\b(Sr|Sra|Sres|Sta|...más_palabras_comunes...|vuestro|vuestros|y|yo|él|en)\\b";
var re = new RegExp(pattern, "gi");
cadena = cadena.replace(re,"");
var mytool_array = cadena.split(" ");
return mytool_array;
}
Por último indicar que fue necesario realizar modificaciones del plugin ya que no resaltaba las palabras que tenían acento si en la caja de texto buscabas sin acento. Justo antes de crear la expresión regular a evaluar, modificamos el patrón para incluir las vocales acentuadas:
pattern = pattern.replace(/a/gi,"[a|á]");pattern = pattern.replace(/e/gi,"[e|é]");pattern = pattern.replace(/i/gi,"[i|í]");pattern = pattern.replace(/o/gi,"[o|ó]");pattern = pattern.replace(/u/gi,"[u|ú]");
if (settings.wordsOnly) {
pattern = "\\b" + pattern + "\\b";
}
var re = new RegExp(pattern, flag);
Seguro que alguna vez os resulta útil.
5 respuestas a “Resaltar una búsqueda con jQuery”
Gracias…muy bueno…mira tengo una consulta talvez para un tema, tengo un par de combobox dentro de un form, junto con una caja de busqueda y un boton que activa la busqueda condicionada por los combobox, quiero que depues de hacer la busqueda se mantengan los datos que ingrese, o sea, el texto en la caja de busqueda y las selecciones de los combobox…ahora se me resetean esos datos y me hace la busqueda pero se pone en blanco la caja de busqueda y vuelve los datos de «selected=» de los combo box, quiero que despues de la busqueda queden esos datso aun, el texto que ingrese y la seleccion que hice en los combobox…Gracias
Hola Carlos, entiendo que utilizas alguna tecnología de servidor para hacer esto (PHP, Java, etc.). Cuando realizas la búsqueda, envías de alguna manera la lista de resultados a la página para mostrarlos, pues debes enviar también los valores de los campos del formulario (como un objeto estructurado o bien como parámetros sencillos). Si vienen esos datos, en la página debemos rellenar el atributo value de la caja de texto y los selected correspondientes en los combos. Si no vienen, como por ejemplo la primera vez que entramos en la página, dejamos la caja y los combos en blanco.
[…] ya he publicado varios posts hablando sobre la librería jQuery, en concreto como resaltar una búsqueda con jQuery y cómo actualizar tablas displaytag con ajax y jQuery. Gracias a esta librería y el plugin […]
Pudieras poner un ejemplo de como realizar la búsqueda, es decir, un ejemplo donde este funcionando, y como le pasas el parámetro de búsqueda a tu función
$(document).ready(function(){
$(«html»).highlight(divide_string(«»),{ wordsOnly: true });
});
te lo agradecería mucho, y si pudieras mostrar como queda el scritp final 😉
me gustaria me explicaras un poco mas acerca de la modificacion del plugin para que busque con o sin acentos, estoy trabajando con highlight v5