feat(typeahead): add the typeahead directive

[pkozlowski-opensource]

Typeahead with tests.

There are still some options that are missing and should be added in the future but I think it is a good start.

I'm sure that there are ways of improving the code so a strict review is in order!

[ajoslin]

I just had a brief look, but.. I think it could the API could be a bit simpler to use. What if we just make the user give us an expression to show the typeahead options. It's more flexible and still easy for the user to get the default functionality.

Some weird set of results, who knows:

<input typeahead="myFn()" ng-model="model">

Default typeahead functionality:

<input typeahead="states | filter:state" ng-model="state">

Yay I can do whatever I like :-):

<input 
  typeahead="pizzas | cuteFilter:cats | coffee:withCream | orderBy:blargh" 
  ng-model="whatever">

And we could probably shorten the attribute names for min/max. How about minLength and maxResults?

[pkozlowski-opensource]

@ajoslin I really like it! It would make the whole directive far simpler and - at the same time - more flexible!

There is only one reason why I wanted to move filtering / ordering to a directive. So, the idea was that the source could be a function that could return a promise. If a promise would be returned a typeahead could display something indicating that suggestions are being retrieved.

Somehow I think that we should be able to support suggestions retrieved via $http...

But I really, really like the idea!

[petebacondarwin]

If you are going to retrieve items into a promise then any filtering and
sorting should be done in the promise pipeline before it arrives at the
type ahead. No?
If so, then you can simply have an expression as Andy suggests and check to
see if the expression evaluates to a function. If so then we assume that
it is a going to return a promise and call it rather than simply using it.

On 14 January 2013 21:14, Pawel Kozlowski notifications@github.com wrote:

@ajoslin /~https://github.com/ajoslin I really like it! It would make the
whole directive far simpler and - at the same time - more flexible!

There is only one reason why I wanted to move filtering / ordering to a
directive. So, the idea was that the source could be a function that could
return a promise. If a promise would be returned a typeahead could display
something indicating that suggestions are being retrieved.

Somehow I think that we should be able to support suggestions retrieved
via $http...

But I really, really like the idea!

—
Reply to this email directly or view it on GitHub/~https://github.com//pull/65#issuecomment-12240104.

[pkozlowski-opensource]

@petebacondarwin @ajoslin thnx for the comments. I wasn't thinking straight yesterday I think as the main reason why I've moved filtering / ordering to a directive was that we can't simply hook up into model. The issue is with AngularJS validation - basically model won't be updated till all the validators give they thumb up. In our case we need to have suggestion based on the view value and not the model one.

Having said this we could still just use one string expression as suggested by @ajoslin and introduce a special variable, something like $viewValue or similar.

@petebacondarwin I was thinking about what you are saying but I think that we still would need parse expressions ourselfs to execute only data retrieval part and have sorting part kicking in only when a promise is resolved.

Not sure if I'm making myself clear...

[petebacondarwin]

What I meant was that the provider of the promise, would chain a then on
their retrieval and do any sorting that they wanted before passing it to
the directive...

$scope.lookupPromise = $http(...).then(function(response) {
  var sortedData = doSorting(response);
  return sortedData;
});

<input ng-model="MyObj.value" typeahead="lookupPromise">

Would this not work?

On 15 January 2013 10:20, Pawel Kozlowski notifications@github.com wrote:

@petebacondarwin /~https://github.com/petebacondarwin @ajoslin/~https://github.com/ajoslinthnx for the comments. I wasn't thinking straight yesterday I think as the
main reason why I've moved filtering / ordering to a directive was that we
can't simply hook up into model. The issue is with AngularJS validation -
basically model won't be updated till all the validators give they thumb
up. In our case we need to have suggestion based on the view value and not
the model one.

Having said this we could still just use one string expression as
suggested by @ajoslin /~https://github.com/ajoslin and introduce a
special variable, something like $viewValue or similar.

@petebacondarwin /~https://github.com/petebacondarwin I was thinking
about what you are saying but I think that we still would need parse
expressions ourselfs to execute only data retrieval part and have sorting
part kicking in only when a promise is resolved.

Not sure if I'm making myself clear...

—
Reply to this email directly or view it on GitHub/~https://github.com//pull/65#issuecomment-12260665.

[pkozlowski-opensource]

@petebacondarwin ahh, I see - but this would mean that all the promie resolving and sorting is in the hands of people using this directive (which might not be bad).

BUT, there are 2 issues:

• we need to display typeahead based on view values, not model values
• which means that people need to have access to those view values

Again, I'm not sure how to do it other than do crazy parsing of expressions...

[petebacondarwin]

Actually, my example is not quite right, since it doesn't let the directive re-request the lookup. We would actually need to provide a function that returns a promise. This function would take the current value, which the directive provides.

$scope.lookupPromise = function(currentValue) {
  return $http(..., currentValue, ...).then(function(response) {
    var sortedData = doSorting(response);
    return sortedData;
  }
});

So in short:

• The expression can be a function or an array.
• If it is an array, we just use it straight for lookups.
• If it is a function, then each time we want to lookup we pass it the current $viewValue and it returns a promise, which has been suitably filtered and sorted already.

??

[pkozlowski-opensource]

I like it! IMHO it is really fits nicely AngularJS ecosystem where we are reusing existing infrastructure and don't force people to learn any new syntax. Need to experiment with implementation and see how it goes.Thnx for the inspiration!

@ajoslin for minLength and maxResults - I wonder if people won't confuse this with ng-max and ng-min, don't know. I kind of liked prefixing things with typeahead since it was making clear that those attribs are for the typeahead. But yeh, it makes the whole thing more verbose...

[pkozlowski-opensource]

Moving discussion to #114