Smarty: An Autocomplete UI in AngularJS

#1

Post by katiemthom » Tue, Jun 17, 2014, 4:35 PM UTC

Smarty: An Autocomplete UI in AngularJS
thumbtack.com

Re: Smarty: An Autocomplete UI in AngularJS

#2

Post by funkiee » Tue, Jun 17, 2014, 4:55 PM UTC

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!

Re: Smarty: An Autocomplete UI in AngularJS

#3

Post by deedubaya » Tue, Jun 17, 2014, 5:20 PM UTC

This reminds me of a jQuery plugin.

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

Re: Smarty: An Autocomplete UI in AngularJS

#4

Post by dchuk » Tue, Jun 17, 2014, 5:28 PM UTC

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

Re: Smarty: An Autocomplete UI in AngularJS

#5

Post by tegeek » Tue, Jun 17, 2014, 5:52 PM UTC

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

Re: Smarty: An Autocomplete UI in AngularJS

#6

Post by scriptproof » Tue, Jun 17, 2014, 5:56 PM UTC

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.

Re: Smarty: An Autocomplete UI in AngularJS

#7

Post by Rygu » Tue, Jun 17, 2014, 6:01 PM UTC

I'm starting to believe that we have a .com-like scarcity problem with programming project names... Smarty PHP templates: http://www.smarty.net/

Re: Smarty: An Autocomplete UI in AngularJS

#8

Post by spankalee » Tue, Jun 17, 2014, 6:02 PM UTC

scriptproof wrote: post #6

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.

Re: Smarty: An Autocomplete UI in AngularJS

#9

Post by ibarrajo » Tue, Jun 17, 2014, 6:03 PM UTC

deedubaya wrote: post #3

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

Re: Smarty: An Autocomplete UI in AngularJS

#10

Post by jamra » Tue, Jun 17, 2014, 6:09 PM UTC

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.