Typeahead usability improvements

[blak3mill3r]

Here are a few changes which I had to make to get the typeahead to work well for me:

• support overriding the per-result DOM in the dropdown (bootstrap 3 css seems to want an <a> tag in each element, or nothing is shown)
• support returning a vector e.g. [name id] from data-source
• set style attr on the dropdown for showing/hiding (bootstrap3 css has a rule display:none; on the class .dropdown which breaks the typeahead before these changes)
• allow differentiating between a value set by typing in the text input, and a value set by the user choosing an option from the dropdown (optional choice-fn)
• TAB key chooses selected item
• focusing the text input, by default, clears it

With these changes, I find it feels very nice and looks great with bootstrap (and I'm using FlatUI as well)

Feedback welcome. Cheers!

[yogthos]

looks great!

[blak3mill3r]

with the quickness!

[yogthos]

just pushed out 0.5.3 to Clojars with the changes

[asok]

Hi @blak3mill3r I was trying to use typeahead by returning a vector from the data source. But I don't quite get how to use it. Could you please elaborate on this?

[blak3mill3r]

Hey @asok ... my memory of these changes are imperfect, but IIRC if you make your data-source return a vector (with an id and a label perhaps), then the typeahead will pass those vectors to your result-fn instead of a plain string (so you almost certainly want to override result-fn if your data-source returns something that you don't want to include as-is in the rendering of the typeahead results).

Also the same 2-element vector (or, whatever data-source returns) will become the value of the model when the user makes a selection... so you can then do whatever you want, like passing just the id value to a server.