devdays/aj.filterable.widget.js

## aj.filterable.widget.js
/*
From http://ajpiano.com/widgetfactory/#slide9
*/

(function( $ ) {

    // The jQuery.aj namespace will automatically be created if it doesn't exist
    $.widget( "aj.filterable", {

        // These options will be used as defaults
        options: {
            className: ""
        },

        _create: function() {
            // The _create method is where you set up the widget
        },

        // Keep various pieces of logic in separate methods
        filter: function() {
            // Methods without an underscore are "public"
        },

        _hover: function() {
            // Methods with an underscore are "private"
        },

        _setOption: function( key, value ) {
            // Use the _setOption method to respond to changes to options
            switch( key ) {
                case "length":
                    break;
            }

            // and call the parent function too!
            return this._superApply( arguments );
        },

        _destroy: function() {
            // Use the destroy method to reverse everything your plugin has applied
            return this._super();
        },
    });
})( jQuery );

## filterable.html
<!DOCTYPE html>
<html>
<head>
    <title>Filterable Widget</title>
    <link href="Content/themes/base/theme.css" rel="stylesheet" />
</head>
<body>
    <h1>Type here</h1>
    <div id="myFilterable">
    </div>
    <div id="userSelection"></div>

    <script src="Scripts/jquery-2.1.3.js"></script>
    <script src="Scripts/jquery-ui-1.11.3.js"></script>
    <script src="Scripts/filterable/jquery-filterable-0.0.1.js"></script>

    <script>
        $("#myFilterable").filterable({ className: "myClass" } );
    </script>
</body>
</html>
	/*
	From http://ajpiano.com/widgetfactory/#slide9
	*/

	(function( $ ) {

	// The jQuery.aj namespace will automatically be created if it doesn't exist
	$.widget( "aj.filterable", {

	// These options will be used as defaults
	options: {
	className: ""
	},

	_create: function() {
	// The _create method is where you set up the widget
	},

	// Keep various pieces of logic in separate methods
	filter: function() {
	// Methods without an underscore are "public"
	},

	_hover: function() {
	// Methods with an underscore are "private"
	},

	_setOption: function( key, value ) {
	// Use the _setOption method to respond to changes to options
	switch( key ) {
	case "length":
	break;
	}

	// and call the parent function too!
	return this._superApply( arguments );
	},

	_destroy: function() {
	// Use the destroy method to reverse everything your plugin has applied
	return this._super();
	},
	});
	})( jQuery );
	<!DOCTYPE html>
	<html>
	<head>
	<title>Filterable Widget</title>
	<link href="Content/themes/base/theme.css" rel="stylesheet" />
	</head>
	<body>
	<h1>Type here</h1>
	<div id="myFilterable">
	</div>
	<div id="userSelection"></div>

	<script src="Scripts/jquery-2.1.3.js"></script>
	<script src="Scripts/jquery-ui-1.11.3.js"></script>
	<script src="Scripts/filterable/jquery-filterable-0.0.1.js"></script>

	<script>
	$("#myFilterable").filterable({ className: "myClass" } );
	</script>
	</body>
	</html>