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?

Swader
  • 11,387
  • 14
  • 50
  • 84
  • Binding function to the angular-ui's typeahead cause performance issue. There is a good alternative of **QuantumUI select** developed by (http://angularui.net/) – Mehmet Otkun Mar 04 '15 at 00:21

2 Answers2

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.

pkozlowski.opensource
  • 117,202
  • 60
  • 326
  • 286
  • 4
    Sweet! Mahalo. The syntax "state for state in" still makes no sense to me but it works great. – Joseph Oster Aug 28 '13 at 07: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 09 '13 at 17:53
  • 5
    replace success method by `.then(function(response){ return response.data; })` – Maxence Sep 19 '13 at 16:40
  • 3
    Is there any way to keep the results from blinking in and out as you type? – Gabriel Syme Oct 10 '13 at 20:55
  • @GabrielSyme: `typeahead-wait-ms` – vucalur Nov 24 '13 at 12:04
  • @vucalur As far as I can tell, all that does is make the typeahead wait before sending a request. Once it sends, the typeahead is still removing the list and not filling it until the new data comes back, creating a blink affect. – Gabriel Syme Nov 25 '13 at 14:41
  • 1
    @GabrielSyme the flickering thing you are mentioning here was fixed in 0.7.0 (just released!). – pkozlowski.opensource Nov 25 '13 at 14:49
  • For those who are trying to use `.success`: just avoid using it, but using `.then`, because `.success` is a syntax sugar for `.then` and it does not really return a promise. See http://stackoverflow.com/a/16385350/3291674 – Ethan Yang Jun 22 '16 at 07:06
  • @JosephOster think of it as 'for every state in states, use state as the value' this makes sense if state was an object 'state.name for state in states' – Michael Westcott Oct 20 '16 at 06:52
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)">
Joff
  • 95
  • 1
  • 8