Buscador en jquery
Abr11
Esta vez escribiré acerca de domsearch.js un plugin de jQuery desarrollado por @julio_ody.
Este plugin nos da la posibilidad de realizar busquedas ya sea en tablas, amplios listados, etc. en tiemo real y sin la necesidad de tener que recargar la página.
A continuación os dejó un ejemplo. Se trata de una tabla con todos los pilotos de formula 1 y sus respectivas escuderías, mediante el buscador podemos localizar rapidamente al piloto, ya sea por su nombre, escudería o ambos.
| Pilotos | Escudería |
|---|---|
| Sebastian Vettel | Red Bull |
| Mark Webber | Red Bull |
| Lewis Hamilton | McLaren |
| Jenson Button | McLaren |
| Fernando Alonso | Ferrari |
| Michael Schumacher | Mercedes GP |
| Nico Rosberg | Mercedes GP |
| Nick Heidfeld | Renault |
| Vitaly Petrov | Renault |
| Rubens Barrichello | Williams |
| Pastor Maldonado | Williams |
| Adrian Sutil | Force India |
| Paul di Resta | Force India |
| Kamui Kobayashi | Sauber |
| Sergio Pérez | Sauber |
| Sébastien Buemi | Toro Rosso |
| Jaime Alguersuari | Toro Rosso |
| Jarno Trulli | Lotus |
| Heikki Kovalainen | Lotus |
| Narain Karthikeyan | Hispania RT |
| Vitantonio Liuzzi | Hispania RT |
| Timo Glock | Virgin |
| Jerome d’Ambrosio | Virgin |
Para poder empezar a utilizar este buscador tan solo hay que añadir las siguientes llamadas js en el <head> de vuestro HTML
<script type="text/javascript" src="js/jquery-1.5.min.js"></script>
<script type="text/javascript" src="js/liquidmetal.js"></script>
<script type="text/javascript" src="js/jquery.domsearch.js"></script>
Podeis descargar las librerías desde la página http://juliocesar.github.com/jquery-domsearch/
Si quisieramos hacer una busqueda genérica sobre la tabla escribiriamos:
$('input#search').domsearch('table#f1');
Si lo que queremos es comparar con alguna de las celdas de la tabla, tan solo tendremos que asignar una clase a cada una de las celdas sobre las que queremos hacer la comparación y hacer la siguiente llamada:
$('#search').domsearch('table#f1', {criteria: 'td.escuderia'});
Imaginaros que además nos interesa buscar por la nacionalidad del piloto, entonces creariamos una nueva clase en las celdas en las que se nos muestra tal información y hariamos la siguiente llamada:
$('#search').domsearch('table#f1', {criteria: ['td.escuderia', 'td.nacionalidad']});
Chip Douglas
25/05/2011
Hola;
muy buena solución para búsquedas sin recargas y sin acciones en el lado del servidor. Habría que retocarlo un poco, porque las búsquedas no son del todo correctas. Si buscas por el término ‘red bull’ o ‘Mercedes GP’ sólo ofrece un resultado.
alberto
05/01/2012
te votaste esta muy bueno
Sergio
09/01/2012
Una solución muy buena para hacer busquedas, però tengo una pequeña duda, hace poco que estoy en el mundo del PHP i Jquery y no consigo entender como funciona internamente para que en cada evento de keydown, la busqueda que realiza en la tabla no afecte a la primera row que contiene los nombres de las columnas “Pilotos” i “Escuderias”, al integrarlo en mi proyecto, se carga la primera fila i no se como evitarlo.