a juicier filter

Here is a small proof-of-concept I came up with for work, a way of letting students type in part of what they're studying and letting them choose from matching topics.

In the box type something  like "solving", and then maybe "solving mul", and see what happens...


The problem this tries to solve is making searching and filtering a bit more interesting and "juicy". There's a bigger UX problem about whether it's better to have kids type in the subject they're looking for help with, or to start by choosing from a list of 9 or 12 topics and starting from there. My gut is that the former is a more useful concept (at least until we're able to provide "show us which textbook you're using" anyway), and that is backed up by how students tended to type in the topic they were interested in when one of our user surveys asked them "What were you looking for when you came to the site?"

In thinking what it would take to turn this into a "real" widget... currently it lacks discoverability, a student might not know what kind of keywords would give useful results. I might suggest having random topic tiles slowly floating in and out of the tile area when the page first loads, giving a hint of the kind of thing the student might then type into the search box. Also there should be a clearer "no results found" message, along with more sophisticated word matching (matching across various verb tenses and plurals etc, instead of the simplistic string prefix matching shown here.)

You can go to the page and view source to see how it's done. Besides some fun with easing and animation (including tile resue, which both limits the amount of DOM objects that have to be generated and sometimes has cool "reshuffling" of existing tiles), this is a decent example of using Ben Alman's debounce jQuery plugin. Debounce (and its cousin "Throttle") is a tool that should be in every jQuery developer's toolbox... what it does is allows you to pile up upates in front of expensive procedures, so in my case rather than having every keypress launch tiles (which would end up with a messy pile of chained or interrupting animations) it waits until the user has stopped typing for a short time.

So instead of writing
$('.filter').keyup(updateStage);
I wrote
$('.filter').keyup( $.debounce( 500, updateStage ));

which put in a delay of 500 millis before trying to reapply the filter and relaunching the animation.

Good stuff! You can use it for keypresses or inside of a UI widget, like a slider control. It's epecially useful for making sure you don't go off firing a multitude of Ajax calls. (I first learned about this at the jQuery Boston meetup group in a presentation by Brian Del Vecchio)