LiveFilter – Plugin jQuery para filtrar tablas y listas HTML

LiveFilter es un plugin jQuery muy liviano para filtrar tablas y listas (ordenadas <ol> o no ordenas <li> ) HTML.

Con éste se puede implementar un cuadro de búsquedas y que por ejemplo, debajo aparezca un listado (que puede ser una lista HTML o una tabla HTML) que al ir escribiendo, sólo se mostrarán los elementos que coincidan con el criterio.

Implementar LiveFilter

Primero tenemos que enlazar los archivos JS de jQuery y LiveFilter en la sección HEAD del HTML de la página:

<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
<script type="text/javascript" src="/path/to/jquery.liveFilter.js">
</script>

Luego tenemos que crear el contenedor para la lista o para la tabla HTML. Para una lista sería algo así:

<div id="live_filter">
<ul>
<li>Elemento 1.</li>
<li>Elemento 2.</li>
<li>Elemento 3.</li>
<li>Elemento 4.</li>
<li>Elemento 5.</li>
<li>Elemento 6.</li>
<li>Elemento 7.</li>
<li>Elemento 8.</li>
<li>Elemento 9.</li>
<li>Elemento 10.</li>
</ul>
</div>

Para una tablar sería:

<div id="live_filter">
<table>
<tr>
<td>Fila 1.</td>
</tr>
<tr>
<td>Fila 2.</td>
</tr>
<tr>
<td>Fila 3.</td>
</tr>
<tr>
<td>Fila 4.</td>
</tr>
<tr>
<td>Fila 5.</td>
</tr>
</table>
</div>

Agregamos un código Javascript que le da funcinalidad a esta implementación:

<script type="text/javascript">
$(document).ready(function() {
$('#wrapping_div_id').liveFilter('criterio_a_filtrar');
});
</script>

El cuadro de búsquedas:

<input type="text" name="liveFilter" />

LiveFilter

Docs/descargar/demo: www.digitalinferno.net/blog/jquery-plugin-livefilter-1-1