Add typeahead directive

[pkozlowski-opensource]

Currently we've got 2 PRs opened for the typeahead directive: #57 and #65. @GuillaumeBiton first PR opened my eyes on how easy is to create this directive with AngularJS. I've toggled with different ideas but both proposals need some more discussion and work before merging.

Opening this issue so we can move the discussion to one place, as we've started to discuss things in several places. Going to close both PRs for now till we build consensus around directive's syntax.

[pkozlowski-opensource]

So, as for the design discussion for typeahead, here is a set of features that we should support (IMO):

• Source
  • can be either an array or a function returning an array
  • if it is a function it should be allowed to return a promise
• Filtering - results need to be filtered based on value in the input (view) - it must be possible to get suggesstions even if a value is invalid (in terms of input's validation).
  • it should be possible to specify a custom filtering (proposed syntax - same as supported by the filter filter
• Ordering - it should be possible to specify a custom ordering criteria (proposed syntax - same as used by the orderBy filter
• Result higlighting - should be possible

[pkozlowski-opensource]

Based on the above assumptions we can imagine the following proposals for the directive's syntax:

The simplest possible usage

<input ng-model="mymodel" typeahead="arrayExpression">

@ajoslin was suggesting that we use standard filtering and ordering with existing filters like so:

<input ng-model="mymodel" typeahead="arrayExpression | filter:$viewValue">

but it would mean that we would have to specify this | filter:$viewValue each and every time... It is flexible but requires more typing and I'm afraid that people won't understand that they have to add | filter:$viewValue

Source as function

<input ng-model="mymodel" typeahead="mySourceFn($viewValue)">

Does anyone has a better proposal for the $viewValue?

Filtering and ordering

While filtering and ordering matches we can assume that we are dealing with an array already (so if a source was a function its results are already resolved).

<input ng-model="mymodel" typeahead="mySourceFn($viewValue)" typeahead-filter="filterExpr" typeahead-order="orderExpr">

There are number of other open questions but we need to agree upon principles.

[yinhm]

Could you add select-row and render-row to typeahead, eg: we may passing a array of array as data source, and select the first element of the row, and render each array with second element of the row.

[pkozlowski-opensource]

Did some further work on the typeahead today adding ability to supply a function as source of matches. What is even better is that those functions can return promises (!) and the typeahead should resolve them:

This definitively needs more work and I still think how to structure it properly but yeh, here it is, WIP:
http://plnkr.co/edit/aSuQaj?p=preview

Once again, I'm amazed how easy is to do things with AngularJS and how powerful the promise API is!

[pkozlowski-opensource]

OK, another (last!) stab at the typeahead syntax, this time making it really AngularJS-like and not at all Bootstrap-JS-like:

https://gist.github.com/pkozlowski-opensource/4998969

The only downside I can see is that it has a bit of noise for the simplest possible use case (items from an array). On the other hand it is much simpler for more elaborate use cases.

BTW: I think that with this proposal we would be exactly matching functionality of http://engineering.twitter.com/2013/02/twitter-typeaheadjs-you-autocomplete-me.html but reusing the whole AngularJS infrastructure ($q, $http + caching, templates etc.)

[ajoslin]

Nice 😄. I like it. And I think the noise is fine - select has the same amount of "noise" for a simple use case too.

[jssebastian]

I agree: the noise is not so bad and is worth it for the full power of a filter pipeline.

[ajoslin]

One comment: Couldn't typeahead-item-template instead just be a directive with a templateUrl (typeahead-item), which the typeahead internally creates? Then people can configure it the normal way.

Or wait .. people will want different templates for different typeaheads. Nevermind :-)