This topic came up recently at http://www.meetup.com/AngularJS-NYC/events/165587672/
I looked briefly at http://angular-ui.github.io/bootstrap/#/typeahead but wound up using a variation of http://jsfiddle.net/sebmade/swfjT/ It's not the lightest weight solution. It requires JQuery-UI. I used JQuery and replaced source: with a $.ajax request to service that returned JSON. And, my success: did a $.map to put the data in the correct format. On Wednesday, November 6, 2013 5:57:35 AM UTC-5, Erlend Strømsvik wrote: > > Old thread and all... > But since this was one of the first posts I found when searching for > AutoComplete in AngularJS, I'm going to post what we did, just for future > reference :) > > We fetched a custom build for UI Bootstrap from > http://angular-ui.github.io/bootstrap/. Only checked off Typeahead. > UI Bootstrap depends on Bootstrap CSS which if HUGE... > > From Bootstrap CSS we extracted only these lines and included those in our > own styles.css: > /* Typeahead stuff > ----------------------------*/ > .dropdown-menu { > position: absolute; > top: 100%; > left: 0; > z-index: 1000; > display: none; > float: left; > min-width: 160px; > padding: 5px 0; > margin: 2px 0 0; > font-size: 14px; > list-style: none; > background-color: #ffffff; > border: 1px solid rgba(0, 0, 0, 0.15); > border-radius: 4px; > -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); > box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); > background-clip: padding-box; > } > .dropdown-menu li a { > display: block; > padding: 3px 20px; > color: #333333; > white-space: nowrap; > } > .dropdown-menu .active a, .dropdown-menu .active a:hover, .dropdown-menu > .active a:focus { > color: #ffffff; > text-decoration: none; > background-color: #428bca; > outline: 0; > } > > Template looks like this: > <input type="text" typeahead-wait-ms="300" typeahead="k for k in > getList($viewValue)"> > > Controller: > $scope.getList = function(term) { > return messageService.getPromiseList(term); > } > > Service: > getPromiseList: function(term) { > var request = 'http://fetch.data.com/service?term=' + term; > return $http.get(request).then(function(response) { > // have to loop through result because it's key => value > var _list = []; > for(var key in response.data.d) { > _list.push(response.data.d[key]); > } > return _list; > }); > }, > > Works with the browsers we have tested and on mobile devices. Support key > up/down. And for our part we like the looks of it. > -- 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 [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/groups/opt_out.
