Thursday, September 7th, 2006
Peter Forde has written a piece on re-inventing search with a Live Filter pattern.
The article talks about his reasoning behind filtering vs. alternatives like Live Search, and ends with a Live Filter demo.
Implementing a filter system that works across all common browsers is a real challenge, full of gotchas and necessary hacks. While nothing here is offensive, you might be surprised at how involved it can get. The reason being that it is of paramount importance to maintain the function and behaviour of the browser’s built-in Back button.
The first revelation is that you should be prepared to write client-side functions to persist, restore, and clear the visual state of your filter. When you render the interface, all of your elements will be in their default state. During your document’s onload event you will want to execute an initialize function that can then “hydrate” the state of your elements from a hidden form. Likewise when submitting a query, you will not want to process the data associated with the form elements you see. Instead, “de-hydrate” the state of your interface into data on a hidden form that can be easily passed on.
During the initialization process, you will need to generate a new key value that could be assigned to a query request should one be submitted. You will use this value to build the action attribute of the hidden form that they might submit! This does need to be performed dynamically, in case the user has returned to a previously rendered page with their back button. Browsers can simply not be trusted to clear their page caches, no matter how many META directives you push down in your HTTP header.
One behaviour we’ve evolved while iterating this filter pattern is to remember the state of the last search when returning to the search page via navigation â€” unless the user specifically clicks on a major site navigation link to go to the search page. We interpret this behaviour as expressing a desire to start a new search from scratch. You’ll want to experiment and see what feels right for your project. These sorts of decisions are subjective and might change with feedback.
Posted by Dion Almaer at 10:50 am