Hacker Read top | best | new | newcomments | leaders | about | bookmarklet login
Smarty: An Autocomplete UI in AngularJS (www.thumbtack.com) similar stories update story
47.0 points by katiemthom | karma 49 | avg karma 9.8 2014-06-17 16:35:26+00:00 | hide | past | favorite | 22 comments



view as:

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.

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


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.


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

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.


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

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


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.


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

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

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

Legal | privacy