Autocomplete with Angular.js

229 views
Skip to first unread message

Gabriel Takács

unread,
Dec 6, 2013, 10:17:05 AM12/6/13
to ang...@googlegroups.com
Hi, 

I'm building an application which uses autocomplete. Autocomplete in this case means this: http://jqueryui.com/autocomplete/ I'm just wondering if there is a way how to avoid loading jQuery UI and use "pure" Angular.js. Thanks.

Martin Alix

unread,
Dec 6, 2013, 11:39:07 AM12/6/13
to ang...@googlegroups.com
You can rollout your own in Angular, it isn't too difficult...
A directive handling the proper keypress/change/paste/click events on an input/ul combo, some CSS3 foo and voilà!
You're in control and you get to practice your Angular skills :)

Aadithya C Udupa

unread,
Dec 6, 2013, 1:06:41 PM12/6/13
to ang...@googlegroups.com
+1
Gabriel,
Unless I am missing something, you can probably do something similar to this and add some click handlers to the li.
Hope this helps!

<!doctype html>
<html ng-app="App">
  <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="animations.css" />
<script type="text/javascript" src="script.js"></script>
</head>
  <body>

<div ng-init="languages = [
  {name:'Javascript'},
  {name:'PHP'},
  {name:'Scala'},
  {name:'Haskell'},
  {name:'Java'},
  {name:'Python'},
  {name:'Cobol'},
  {name:'Ruby'},
  {name:'C++'}]">
  Auto complete Languages:
  <input type="search" ng-model="q" placeholder="Computer langs..." />
  <ul class="example-animate-container">
    <li class="animate-repeat" ng-repeat="lang in languages | filter:q">
      {{lang.name}}
    </li>
  </ul>
</div>
  </body>
</html>




--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.



--
Regards,
Aadithya C Udupa

Gabriel Takács

unread,
Dec 11, 2013, 3:00:35 AM12/11/13
to ang...@googlegroups.com
Another thing is, that I want to show another data, than I'm performing search in. I'm going to use it to autocomplete users. It should perform search in user id, nickname, e-mail, first name and surname, but it will only display user real name (first name and surname). With jQuery autocomplete I was able to search and display other data. Is it also possible to do with AngularJS without jQuery autocomplete? 

And one more question - can I somehow get the data from the server through $_POST?

Thanks.

Dňa piatok, 6. decembra 2013 19:06:41 UTC+1 Aadithya Udupa napísal(-a):
Reply all
Reply to author
Forward
0 new messages