itsjohncs / searchbox.jsx Goto Github PK

We want to support faded text in the search bar, as well as the ability for the user to hit tab to autocomplete.

The user datasets can have a function available to them that lets them set the faded text that is displayed on the search bar. It might be tricky to handle the fact that the faded text should absolutely be a continuation of what the user typed in (ex: ap could have a faded apple, but not a faded xanthibar). So it might make more sense to have the search input call some registered function on the user dataset... Worth discussing whenever this is picked up.

This will mainly be to make the examples a little easier to follow. But some users might also be fine with a very simple search box.

Currently it's just a simple div but we'll want to make it a real dropdown like typeahead.js. We can absolutely position it relative to the search input with JQuery UI (which is already pulled in for us by playground.htm). We'll want this to be overridable in case the user wants to customize how it's mounted.

It is also going to be desirable to hide and show the dropdown dynamically as the results change (don't want it to show when there's no results for example). This will require more cooperation from the user's dataset components though so we should punt that for the moment.

The user can highlight things by using the keyboard or hovering over things with their mouse. Therefore cooperation among all the components is necessary. Which is annoying. I think we came up with some good ideas for this though.

Not sure where in the typeahead.js pipeline this is taken care of...

If the query is Apples and I want to set the faded text to apples, I want to be able to run magicFoo('apples') and get 'Apples'.

This will involve three datasets.

• local
• remote
• footer