How to tie angular-ui’s typeahead with a server via $http for server side optimization?

by

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.

More Related Contents:

  1. How to use a keypress event in AngularJS?
  2. Injecting $scope into an angular service function()
  3. How to reload the current state?
  4. Can you override specific templates in AngularUI Bootstrap?
  5. Otherwise on StateProvider
  6. Enable angular-ui tooltip on custom events
  7. Dynamically set the value of ui-sref Angularjs
  8. Scope issue in AngularJS using AngularUI Bootstrap Modal
  9. angularjs share data config between controllers
  10. How do I create an AngularJS UI bootstrap popover with HTML content?
  11. Angular bootstrap datepicker date format does not format ng-model value
  12. How to integrate AngularUI to AngularJS?
  13. How to detect browser using angularjs?
  14. angularjs ui-router – how to build master state which is global across app
  15. Cannot get textarea value in angularjs
  16. angularjs text area character counter
  17. Two views in one AngularUI Router state sharing scope
  18. How to cancel an $http request in AngularJS?
  19. When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?
  20. Can I use ng-model with isolated scope?
  21. AngularJS : Where to use promises?
  22. Confused about Angularjs transcluded and isolate scopes & bindings
  23. ng-repeat not updating on update of array
  24. Angular $http vs service vs ngResource
  25. When to use the AngularJS `$onInit` Life-Cycle Hook
  26. Compare objects in Angular
  27. Directing the user to a child state when they are transitioning to its parent state using UI-Router
  28. Rendering Highcharts using Angular js Directives
  29. What is ng-transclude?
  30. Angular and mixing jQuery UI – Why not?

Leave a Comment