jQuery Plugin makeSearchList: Aplicar un filtro a una lista

closeHola! hace 4 years 4 months 10 days que escrib铆 esta entrada, puede que esta informaci贸n ya no sea valida en la actualidad, por favor se comprensivo conmigo cuando comentes 馃檪

El siguiente c贸digo es de un plugin hecho con jQuery para convertir una lista normal en una lista con un buscador.

/*
 * jQuery makeSearchList Powered by Jodacame
 * http://Nexxuz.com
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
*/
 
jQuery.fn.makeSearchList = function() { 	
	input = $('<input type="text" class="search">');	
	$(input).attr("placeholder","Search here ...");	
	$(this).prepend(input);
	var list	= $(this);
    $(input)
	      .change( function () {
	        var filter = $(this).val();	        
	        if(filter) {	        	
	        $("li",$(list)).hide();
	          $("li:Contains(" + filter + ")",$(list)).show();
	        } else {	        	
	        	$("li",$(list)).show();
	        }
	        return false;
	      })
	    .keyup( function () {	        
	        $(this).change();
	    });	  
 
	    // Creamos la pseudo-funcion Contains
	    jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
			return function( elem ) {
				return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
			};
		});
 
};

B谩sicamente lo que hace el plugin es recibir un objeto list y agrearle un input con el cual podremos buscar sobre la lista usando el selector Contains.


DemoDownload

You may also like...

Deja un comentario

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *