21 comments

[ 4.8 ms ] story [ 71.3 ms ] thread
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!
I too am a fan of the UI Bootstrap typeahead - it's simple, and works nicely. It's not as robust as select2 or whatnot though as you've pointed out.
This reminds me of a jQuery plugin.

It should really be a directive though, so it adds all the required markup on its own.

exactly, it's the angular way
I'm pretty sure that, technically, that Service should actually be a Factory since it's returning an Object.
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.
Cool but the demo isn't working in Chrome for me.

It would be nice to wrap something like that in a web component so that it'd be trivial to reuse without a framework.

I'm starting to believe that we have a .com-like scarcity problem with programming project names... Smarty PHP templates: http://www.smarty.net/
You can debounce your web calls. Here is an example: http://davidwalsh.name/javascript-debounce-function

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.

The name "Smarty" can be confused with a templating engine (which has the same name).
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.
Could do a few things more the Angular way.

- 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.

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.
For autocomplete backend, you can use 'Autocomplete as a Service'. Kind of backend service designed for autocomplete. http://www.aaas.io