Friday, February 26, 2010

Code Te Ching - Verse 55

Can anyone give a pattern for refactoring?
Then there is no algorithm to follow?
Yet there it happens, without steps?

Order exists beyond our ability to capture it.

A wise man once knew true granularity:
  1.  Write down the problem
  2.  Think real hard
  3.  Write down the solution

Saturday, February 20, 2010

Drop Down Like It's Hot

I've never run across a search drop-down box that functioned exactly how I wanted. Most code for drop-down boxes seem bound up in a particular heavyweight framework (like dojo, or exjs), which are fine if you use them, but I don't. I use jQuery (an altogether different heavyweight framework).

(Before getting too far along, grab the js and test libs from github)

Another problem is they always seem bent on a particular setup (a text input rather than a textarea) - or performing a particular function (load via ajax or pre-loaded array data) or assume a particular use-case (drop down for a search box). I want the flexibility to define my own client-side datasource parser, to have multiple drop-downs on a single page, or search from several data-sources at once, separating each type of data by title, or work like the gmail email text-area, where all non-word chars after the last comma performs a search of contacts - choosing an item appends to the list.

Anyway, I have a big itch to scratch - to channel the Cathedral and Bazaar. Here is the problem scope, broken down:

  • Must work in text input fields and textareas

  • Must allow single or multiple elements chosen (separated by custom char)

  • Must allow datasource from a local array, object, or remote (ajax, on-demand javascript, json, etc)

  • Must allow custom parsing of datasource

  • Must allow multiple simulates datasources of various types (eg. 1 local + 2 ajax)

  • Must optionally limit result sets, both by total and per datasource

  • Must optionally seperate datasources with a non-clickable header

  • Must optionally pre-parse input data (eg. ignore all non-word characters for purposes of searching)

  • Must optionally suspend drop-down until a minimum number of chars are typed

  • Must allow for submission throttling

  • Must allow for caching return values

  • Must be able to move though elements via keyboard up/down, tab/enter to choose item, esc to close

  • Must close the drop-down when bluring the input field or clicking outside the drop-down

  • Must highlight matching typed characters in the dropdown data set

  • Must work on as many browsers as possible, otherwise degrade

  • Must use no toolkit beyond standard jquery

  • Must be unobtrusive javascript

  • Must look nice (or hot!), and feel natural to the user (not heavyweight or klunky)

  • Must be easy to use (every choice must have reasonable defaults and at least one implementation)

  • All above items must be optional and customizable

  • Must be well documented so I don’t have to talk to anyone

Basically, I'm taking the shotgun approach: cram as many features into this thing before it becomes absurd, and stop just shy of that.

Here are several examples on usage. I appreciate any thoughts.

Wednesday, February 3, 2010

Code Te Ching - Verse 54

The lamer prides himself on his skill.
He spends ten times longer than necessary and says:
    "This way is the best!"
How much more has gone undone?

The elite does not dwell on his skill.
He leans into the job, code falls forth:
    “This way will work.”
What more can he do?

Because he focuses on the use, his work is never useless.