Angular almighty autocomplete

Question

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

Answer 1

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

Answer 2

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.