Quantcast
Viewing latest article 6
Browse Latest Browse All 6

jQuery Plugin makeSearchList: Aplicar un filtro a una lista

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

Quizás también le interese:


Viewing latest article 6
Browse Latest Browse All 6

Trending Articles