Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular almighty autocomplete

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

like image 870
Anders Simonsen Avatar asked Aug 18 '14 20:08

Anders Simonsen


2 Answers

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

like image 186
Max Sassen Avatar answered Nov 18 '22 18:11

Max Sassen


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.

like image 35
JustGoscha Avatar answered Nov 18 '22 19:11

JustGoscha