
Smarty: An Autocomplete UI in AngularJS - katiemthom
http://www.thumbtack.com/engineering/introducing-smarty/
======
Rygu
I'm starting to believe that we have a .com-like scarcity problem with
programming project names... Smarty PHP templates:
[http://www.smarty.net/](http://www.smarty.net/)

------
jamra
You can debounce your web calls. Here is an example:
[http://davidwalsh.name/javascript-debounce-
function](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.

------
scriptproof
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](http://www.scriptol.com/javascript/autocomplete.php)
Adding a scrolling list of choices would requires two or three more lines.

~~~
ludwigvan
We use Twitter's typeahead (not the one in bootstrap, separate project),
pretty pleased with it:
[http://twitter.github.io/typeahead.js/](http://twitter.github.io/typeahead.js/)

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

------
funkiee
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!

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

------
itsdrewmiller
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](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.

------
jongleberry
If you want a mobile-first, vanilla JS autocomplete implementation:
[https://github.com/jonathanong/autocomplete](https://github.com/jonathanong/autocomplete)

------
tegeek
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...](https://github.com/Reactive-
Extensions/rx.angular.js/blob/master/examples/%24createObservableFunction/app.js)

BaconJS home page showing an autocomplete in less than 15 LOC,
[http://baconjs.github.io](http://baconjs.github.io)

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

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

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

------
aaas_dot_io
For autocomplete backend, you can use 'Autocomplete as a Service'. Kind of
backend service designed for autocomplete.
[http://www.aaas.io](http://www.aaas.io)

------
deedubaya
This reminds me of a jQuery plugin.

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

~~~
ibarrajo
exactly, it's the angular way

------
chenster
If you use PHP, try [http://phpautocomplete.com](http://phpautocomplete.com),
no javascript is required.

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

~~~
nsher
Should replace the image with an actual demo. I couldn't find one.

~~~
axk
It's used on [http://www.thumbtack.com/](http://www.thumbtack.com/)

