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.
On This Page:
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
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.
Leave a comment