Im trying to alter the almighty autocomplete to accept an array of objects instead of just an array of strings. But sadly, I am at a standstill.
Here I want an array to contain objects instead of strings in the app.js
MovieRetriever.getmovies = function(i) {
var moviedata = $q.defer();
var movies;
var moreMovies = [{id: "0", name: "someMovie"}, {id: "1", name: "anotherMovie"}, {id: "2", name: "aMovie"}];
// var moreMovies = ["The Wolverine", "The Smurfs 2", "The Mortal Instruments: City of Bones"]
if(i && i.indexOf('T')!=-1)
movies=moreMovies;
else
movies=moreMovies;
$timeout(function(){
moviedata.resolve(movies);
},1000);
return moviedata.promise
But when I do that, I get punished with errors like
Error: [$sce:itype] http://errors.angularjs.org/1.2.12/$sce/itype?p0=html
Which I suspect origins from this area in the autocomplete.js
template: '\
<div class="autocomplete {{ attrs.class }}" id="{{ attrs.id }}">\
<input\
type="text"\
ng-model="searchParam"\
placeholder="{{ attrs.placeholder }}"\
class="{{ attrs.inputclass }}"\
id="{{ attrs.inputid }}"/>\
<ul ng-show="completing">\
<li\
suggestion\
ng-repeat="suggestion in suggestions | filter:searchFilter | orderBy:\'toString()\' track by $index"\
index="{{ $index }}"\
val="{{ suggestion }}"\
ng-class="{ active: ($index === selectedIndex) }"\
ng-click="select(suggestion)"\
ng-bind-html="suggestion | highlight:searchParam"></li>\
</ul>\
</div>'
And here
app.filter('highlight', ['$sce', function ($sce) {
I meant to paste more code here, but the editor plays tricks on me. And this being my first question, I will have to leave it at that.
Please follow the link in the top for full code example, and see if you can help me
Just a question: Why don't you use http://angular-ui.github.io/bootstrap/#/typeahead
<h4>Custom templates for results</h4>
<pre>Model: {{customSelected | json}}</pre>
<input type="text" ng-model="customSelected" placeholder="Custom template" typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" class="form-control">
I think this is cleaner/easier for you. http://plnkr.co/edit/?p=preview
You are right, you have to change the template a little.
Change this line:
ng-bind-html="suggestion | highlight:searchParam"></li>\
to that:
ng-bind-html="suggestion.name | highlight:searchParam"></li>\
and it should work.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With