Angular Bootstrap's Typeahead directive does this job pretty well, although we've had to do some template overriding and funky directives to get the functionality we needed (e.g. switching the results to a different set by clicking an item in the dropdown). Glad to see more alternatives being made out there. Nice job!
If you want not use Angular or another other framework, a fully functional autocomplete may be made with 10 lines of JavaScript. See demo: http://www.scriptol.com/javascript/autocomplete.php
Adding a scrolling list of choices would requires two or three more lines.
My company did a fairly thorough review of the open options in this space and settled on select2, which has a handy angular support library here: https://github.com/angular-ui/ui-select2. This isn't the most performant one (twitter's typeahead was for the ones we looked at) but it has a lot of great features, nice look and feel, and not terrible graceful degradation.
The big feature that I want in an autocomplete is the ability to click on the text area and get a list of possible completions. I hacked that onto bootstraps angular autocomplete widget, but it's a bit of a mess.
21 comments
[ 4.8 ms ] story [ 71.3 ms ] threadIt should really be a directive though, so it adds all the required markup on its own.
Here is the autocomplete with AngularJS + RxJS https://github.com/Reactive-Extensions/rx.angular.js/blob/ma...
BaconJS home page showing an autocomplete in less than 15 LOC, http://baconjs.github.io
It would be nice to wrap something like that in a web component so that it'd be trivial to reuse without a framework.
This means that you do not make a web call for each keystroke. That is a huge speedup.
I don't know why you would need to leverage Angular to make a typeahead, but it's a nice writeup nonetheless.
- Use ng-keydown on the input field (less overhead than $scope.$watch)
- $http.get has a built in promise. No need to build another one on top of it.
- No need to splice the response, just pass the whole array and use the "limitTo" filter on the results.