Desarrollado por Mike Merrit, LiveFilter nos ofrece una funcionalidad muy útil: filtrado automático de datos en una lista. Una excelente manera de presentar datos y facilitar la selección de estos.
 

Que es Live Filter?

LiveFilter es un ligero plugin desarrollado para jQuery  que filtra una lista de datos (ordenada o desordenada) y nos muestra los resultados que coinciden con la cadena a buscar. Su uso es realmente sencillo y la implementación en cualquier web apenas nos llevará cinco minutos.

Download/Descarga

Development Version - Esta versión se recomienda usar solo para entorno de desarrollo o bien para pruebas y mejoras o modificaciones sobre el código original.

Production Version – Esta es la versión ideal para integrar en nuestra web y se encuentra compactada.

Cambios sobre la anterior versión

• Table rows ahora pueden ser filtrados con el uso de "table" en lugar de "ul" y "ol".
• Cambios en el código para optimizar el rendimiento.

Como se usa

LiveFilter es fácil de instalar. Lo primero que debemos hacer es descargar la última versión disponible y subirla a nuestro espacio de alojamiento web tras descompactar el archivo ZIP que contiene el plugin, imágenes y ejemplos. A continuación crearemos nuestra lista de datos, para ello podemos crearla manualmente escribiendola con elementos de lista (en el ejemplo Lista Desordenada) o bien en formato de tabla. Es importante que en el caso de tabla identifiquemos bien si disponemos de una línea de "thead" para establecer correctamente los elementos a mostrar en la lista final.

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

Si queremos utilizar un formato de lista de tabla simple este sería un ejemplo de como puede quedar sin utilizar una línea de encabezado de tabla. Recuerda que este formato solo está disponible en esta nueva versión LiveFilter 1.1+

<div id="live_filter">

	<table>
		<tr>
			<td>This is table row 1.</td>
		</tr>
		<tr>

			<td>This is table row 2.</td>
		</tr>
		<tr>
			<td>This is table row 3.</td>
		</tr>

		<tr>
			<td>This is table row 4.</td>
		</tr>
		<tr>
			<td>This is table row 5.</td>

		</tr>
	</table>
</div>

Lo siguiente que necesitamos es agregar el siguiente código en nuestra cabecera web. En el caso de MBC se recomienda utilizar la tabla de Frameworks para integrar directamente la librería y el plugin a la zona en la que se utilice. Reemplazar  /path/to con la ruta correcta donde se suba la librería LiveFilter.js.

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

<script type="text/javascript" src="/path/to/jquery.liveFilter.js"></script>

Después de tener activa la librería creamos un pequeño script donde indicamos que elemento queremos seleccionar para utilizar en LiveFilter y así aplicar el filtro automático de datos. El código se podrá poner en la cabecera de la web o bien dentro del Body, pero recomendable que sea previo a la lista de datos que deseamos filtrar, con lo que en MBC lo ideal es asociarlo a la caja que contenga la información a mostrar. Recordemos que la lista de datos también puede ser creada automáticamente con el módulo DatosLista.

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

El #wrapping_div_id debe ser reemplazado por el ID del area DIV que esté agrupando la lista de datos o la tabla, en el caso de DatosLista será el propio BOXid y what_to_filter debe ser reemplazado por el elemento a filtrar según sea ul, li, o table. En este ejemplo se ha usado la lista desordenada <ul>.

El paso final será agregar un campo de texto de entrada (Input) que será quien realice el filtro en la lista de datos. El texto del "input" debe tener la clase filter para identificarlo como elemento filtrante. Otra cosa que debemos mirar es si deseamos agregar algún estilo personalizado a la caja de texto o los elementos de la lista de datos. Este será nuestro código para definir el "input" y como se aprecia, no precisa estar contenido en un "FORM".

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

Esto es todo lo que necesitamos hacer. Tan solo acompañar de nuestra propia personalización de estilos si queremos mejorar el aspecto.
Este es el código completo de ejemplo:

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>LiveFilter Example</title>

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
		<script type="text/javascript" src="/js/jquery.liveFilter.js"></script>
		<script type="text/javascript">

			$(document).ready(function() {
				$('#live_filter').liveFilter('ul');
			});
		</script>
	</head>
	<body>
		<div id="live_filter">
			<input type="text" class="filter" name="liveFilter" />

			<ul>
				<li>This is list item 1.</li>
				<li>This is list item 2.</li>
				<li>This is list item 3.</li>

				<li>This is list item 4.</li>
				<li>This is list item 5.</li>
				<li>This is list item 6.</li>
				<li>This is list item 7.</li>

				<li>This is list item 8.</li>
				<li>This is list item 9.</li>
				<li>This is list item 10.</li>
			</ul>

		</div>
	</body>
</html>

Demo

Table filter demo – Una demo de como filtrar datos de una tabla.

List filter demo – Una demo de como filtrar datos de una lista de datos.