70

The typeahead example (http://angular-ui.github.io/bootstrap/#/typeahead) mentions it's easy to implement a back end into this autocomplete, but provides no example. What interests me in particular is finding out the currently entered string so that I can send that to the server and send back an already filtered result - I would like to do this optimization server-side and minimize my queries, I don't think returning the whole result set and just excluding non-matching items for display is feasible for an app that has over 200,000 entries in the database.

Should I, in this case, forget about typeahead altogether and implement a custom solution with a dropdown, or is there a way to do this easily?

1
  • Binding function to the angular-ui's typeahead cause performance issue. There is a good alternative of QuantumUI select developed by (angularui.net) Mar 4, 2015 at 0:21

2 Answers 2

120

There is a way to implement this very easily, no need to roll out your custom solution (at least not for this case!). Basically you can use any function as part of the typeaheads expression, ex.:

<input type="text" ng-model="selected" typeahead="state for state in getStates($viewValue)">

As you can see from this example the getStates($viewValue) method (defined on a scope) can be called and the $viewValue corresponds to a value entered by a user.

What is the best here is that your function can return a promise and this promise will be correctly recognized by the typeahead.

Some time ago I've written a sample plunk that shows how to use server-side calls to provide auto-complete. Check this plunk that shows autocomplete for all the cities in US (based on geobytes.com), where cities are queried live from a JSONP service:

http://plnkr.co/edit/t1neIS?p=preview

Check it out for a working example on how to do filtering on the server side (you need to type at least 3 characters to see results). Of course you are not limited to jsonp calls, you can use any method returning a promise.

9
  • 4
    Sweet! Mahalo. The syntax "state for state in" still makes no sense to me but it works great. Aug 28, 2013 at 7:55
  • 3
    can you put an example with $http and success method? I have problem with it and it's not solved whole the day.
    – Ali
    Sep 9, 2013 at 17:53
  • 5
    replace success method by .then(function(response){ return response.data; })
    – Maxence
    Sep 19, 2013 at 16:40
  • 3
    Is there any way to keep the results from blinking in and out as you type? Oct 10, 2013 at 20:55
  • 1
    @GabrielSyme the flickering thing you are mentioning here was fixed in 0.7.0 (just released!). Nov 25, 2013 at 14:49
5

Don't have the rep to comment so posting as an answer (sorry!)

If you are using a newer version of bootstrap you need to add uib- in front of typeahead (like so)

<input type="text" ng-model="selected" uib-typeahead="state for state in getStates($viewValue)">

Not the answer you're looking for? Browse other questions tagged or ask your own question.