Prototyping a Search Form

jsfiddle.net: a prototype of a searchform

Decided to make a little prototype today, to get a feel how this kind of form might work.

Description: The form has “bookends” with the left representing the previous searches and the right representing future searches. That’s previous/future as in a kind of timeline.

Hovering over the bookend will show the chronologically-closest value alongside the current, and clicking will both go to that value and show the next in that direction. If there is more than one value in a direction, it shows a little dropdown, and you can jump to any point in the history from there.

It’s not the cleanest code, but it’s a prototype, and it does a decent job of letting me get a feel for if this kind of control is worth using.

It’s likely that other controls are more useful for most cases, but maybe this is useful for some. Particularly, it might be more useful if the whole history showed at once, and you could use arrow keys to move back/forth.

Anyway, I did this in JSFiddle, mainly because it’s easy enough to share and people can try it right there.

Just hover/click on the little ends on either side of the main form in the result area (bottom right pane).

edit: I embedded it here: