Skip to the content

Filter Selector

Employer:

Terra Incognita Productions

Position:

Developer

Roles:

Contributions:

Technologies:

Description:

The Filter Selector component provides a flexible user interface for browsing/searching a set of items. In the Sixth Floor Museum website, it is used several times to search things like Collections Items or Memory Book entries.

It is flexible because the programmer may customize the user interface depending on the filter type. For example, in the Sixth Floor Museum Online Collections, the filter type "Topics" has a checkbox-like interface for filtering results by topics such as "Air Force One" or "Kennedy Motercade." On the other hand, the filter type "Year Range" uses a pair of drop-down boxes for filtering results by a range of years. The programmer may use an existing user interface type or extend the component with a custom one.

A notable feature of the Filter Selector component is the behavior of the URL and browser back button. The state is made up of any search terms and the entire collection of currently set filters. I developed an algorithm for compactly storing this potentially large and complex set of information in a very compact, URL-friendly string. The state of the filters is stored in the URL. One benefit of this is that users may bookmark search results with a particular set of filters and return to the exact search results at a later time.

As filters are set, the results are updated automatically without having to reload the page. Another benefit of storing the state of the filters in the URL is that the browser's back button can be used to step backward to previous filter states and results.