Javascript YUI Filter Control

The Filter control provides a front end component that can be used on websites to manage the specification of a multi-faceted filter. It was inspired by the filtering capabilties found in Fog Bugz, and utilizes the Yahoo UI Widgets Javascript framework, a set of free and open source Javascript libraries that make creating Ajax applications very easy.

Disclaimer: This widget and website is not affiliated with Yahoo in any way.

Quick Links:

  • License: The Tags Widget is licensed under the same terms as the YUI Library, which is issued under a BSD license.
  • Download: Download the Filter Widget.
  • Prerequisites: Download YUI as part of the full YUI Library on SourceForge.
  • Documentation: View the full API documentation for the Filter Widget

RSSSubscribe to Updates and Comments about this Project

Live Demo



Getting Started

To use the Filter widget/component, include the following source files in your web page with the script tag:

Your Filter Widget implementation will consist of one instantiatiable object:

  • FilterWidget - when bound to an HTML div, this object will render and handle all user interface interactions. It also provides several events that one can subscribe to in order to handle specific key events.

Instantiating the Filter Widget

The Filter Widget constructor has one required parameter:

  • the ID of the HTML object to which the widget will be bound and rendered.

Using the Filter Widget

Adding Constraints

For each "constraint" or value you want to filter your results by, you will need to instantiate and add a Constraint object to the Filter widget. Each constraint allows a user to specify a set of possible values to filter by, the label for the constraint, the HTML input element name and whether the constraint is "active" by default.

Setting a constraint to active by default

Unless otherwise specified, the filter widget will not apply any constraints to the filter, but will set all constraints in an 'inactive' state so that a user can apply them manually one-by-one. But if a user needs to have a constraints applied to a filter by default, say when the page is initially rendered, then they would set the "selected" property to 1, like so:

Subscribing to Filter Events

The Filter Widget has a custom event that one can subscribe to. This event is fired whe the user clicks the "Filter" button.

Support

If you have questions or problems using this widget/code, please visit the majordojo discussion forums.

For questions and issues with using the Yahoo UI Framework, please visit Yahoo's developer web site.

1 Comment

I would love to use this filter control on my website but I'm not really a programmer so I don't know how to implement it in my Movabletype blog. Are there any examples that I could look at? Would you also please fix the link to the documentation when you get a chance so I can check it out?

Thank! Jason

Leave a comment

what will you say?


Recent Comments

  • I would love to use this filter control on my website but I'm not really a programmer so I don't know how to implement it in my Movabletype blog. Are there any examples that I could look at? Would you also please fix the...

Close