Smarty: An Autocomplete UI in AngularJS

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.

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.

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.

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!

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.

If you want a mobile-first, vanilla JS autocomplete implementation: https://github.com/jonathanong/autocomplete

One of the most simple and intuitive autocomplete I saw was using Functional Reactive Programming technique.

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

I'm pretty sure that, technically, that Service should actually be a Factory since it's returning an Object.

The name "Smarty" can be confused with a templating engine (which has the same name).

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

This reminds me of a jQuery plugin.

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

If you use PHP, try http://phpautocomplete.com, no javascript is required.

FYI, the 360KB PNG on your site made me feel like I was back on dialup.