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.