For filtering datasets and populating form elements. Currently only populates select elements.

jquery.formfilter.js

/*
 * Form Filter - jQuery plugin for filtering datasets
 *
 * Copyright (c) Babs Gösgens
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Version:  1.0
 *
 * REQUIRES LAZY LOAD TO EXECUTE LINE 173:
 * https://github.com/tuupola/jquery_lazyload
 *
 */
(function($) {

    $.fn.extend({
        filterForm: function(options) {
            if (options && typeof(options) == 'object') {
                options = $.extend( {}, $.filterForm.defaults, options );
            }
			return this.each(function() {
                new $.filterForm(this, options );
            });
        },
        paginate: function(options) {
            if (options && typeof(options) == 'object') {
                options = $.extend( {}, $.paginate.defaults, options );
            }
			return this.each(function() {
                new $.paginate(this, options );
            });
        }
    });

    $.filterForm = function( el, options ) {

    	var defaults = {
			dataset: $(el).attr('data-dataset'),
			identifier: $(el).attr('data-identifier'),
			results: $(el).attr('data-results'),
			page: 10
	    }

	    var active = {};
		var dataset = options.dataset;

		$(options.results).children().addClass('active'); // Needed for pagination

		$(el).find('select').change(function(){

			$(el).append('<div class="loader">Loader div</div>')
    		
    		var s = $(this).find(':selected');
    		if( s.length > 0 ) {
    			active[ $(this).attr('name') ] = s.val();
    		}
    		filterDataset();
    		setOptionsFromDataset( $(this).empty() );

    		$(options.results).paginate({
    			page: options.page,
    			classes: 'filter pagination'
    		});

    		$(el).find('.loader').remove();

    	}).trigger('change');

		function filterDataset()
		{
			var a = [];
			for(key in active) {
				$.grep(dataset, function(row, i){
					var el = $(options.results).find('[data-id="'+row[options.identifier]+'"]');
					if(row[key].indexOf(active[key])===-1) {
						el.hide().removeClass('active').addClass('inactive');
						a.push(row[options.identifier]);
					}
					else {
						if($.inArray(row[options.identifier],a)===-1) {
							el.addClass('active').show();
						}
					}
				});
			}
		}
    	function setOptionsFromDataset(s)
    	{
    		// Prevent empty resultsets
			if(dataset.length < 1) {
				setOptionsFromDataset(s, options.dataset);
			}

    		var f = s.attr('name');
			var a = {};

			s.append(new Option('Show all', ''));
    		$.grep(dataset, function(row, i){
    			if(row[f]) {
    				var o = row[f].split(','); // In case there is a group concatenated value like {"value:label","value:label"} or {"value","value"}
				
					for(var i=0; i<$(o).length; i++) {
						o[i] = o[i].split(':'); // In case the value holds both a value and a label like "value:label"

						if(o[i].length === 1) {
							o[i].push( o[i][0] ); // Just repeat the entry as the label
						}
						var v = o[i][0];
						a[v] = o[i];
					}
    			}
			});
    		// Append option
			for(var i in a) { s.append('<option value="'+a[i][0]+'">'+a[i][1]+'</option>').css('text-transform', 'capitalize'); } // Capitalize, just to make sure. Sometimes a value is in lowercase
			// Select active
			if(typeof active[f] !== 'undefined') { s.val(active[f]); }
    	}
    };

    $.paginate = function( el, options ) {

    	var defaults = {
			page: 10,
			before: false,
			classes: 'pagination'
	    }

	    var classes = options.classes;
	    var results = $(el).children('.active');
	    var total   = results.length;
	    var pages   = Math.ceil(total/options.page);
	    var sets    = [];
	    var list    = $('<ol></ol>').addClass( ''+classes );
	    var current = 0;

	    // Prepare an empty pagination object
	    if( $(el).siblings('ol.'+classes.replace(' ','.')).length === 0  ) {
		    options.before ? list.insertBefore(el) : list.insertAfter(el);
	    }
	    list = $(el).siblings('ol.'+classes.replace(' ','.'));
	    list.empty();

	    // if(pages > 1) { 
	    	
	    	for(var i=0; i<pages; i++) {

	    		var start 	= i*(options.page);
	    		var end 	= (i*(options.page))+(options.page);
	    		sets.push( results.slice(start,end) );

	    		var pageLink = $('<li><button data-page="'+i+'">'+(i+1)+'</button></li>');
	    		list.append(pageLink);
	    	}

	    	setPageLink();
	    // }

	    function setPageLink()
	    {
	    	list.children().click(function(){
				$(this).addClass('active').siblings('li').removeClass('active');
	    		current = parseInt( $(this).find('button').attr('data-page') );
	    		changePage();
	    	})
	    	.first().trigger('click');
	    }

	    function changePage()
	    {
	    	$(el).children().hide();
	    	sets[current].each(function(){
	    		$(this).fadeIn();
	    		$(this).find('img').lazyload();
	    	});
	    }

	};
})(jQuery);

Calling example:

$('form.filter').filterForm({
    dataset:    <?php echo json_encode($someDataset) ?>,
    identifier: 'element_id', 
    results:    'ul#results',
    page: 6 // Number of items per page
});