CODEWITHSUNDEEP
angularjsautocompleteangular-materialmd-autocomplete
Rishabh Jain
Rishabh Jain

Reputation: 536

md-autocomplete not working

I am using this code to search for movies as the user types movie name in autocomplete box . I am getting the results on console but that is not showing item text Html

<md-autocomplete md-selected-item="selectedMovie"
    md-search-text-change="searchMovie(searchText)"
    md-search-text="searchText"
    md-selected-item-change="selectedItemChange(movie)"
    md-items="movie in movies"
    md-item-text="movie.title"
    md-min-length="1" 
    placeholder="Search Movies">
  <md-item-template>
        <span md-highlight-text="searchText" md-highlight-flags="^i"> 
          {{movie.title}}
        </span>
    </md-item-template>
    <md-not-found>
        No Movies matching were found.

    </md-not-found>
</md-autocomplete>

Js

 $scope.searchMovie = function (text) {
            $http.get('api/movie', {
                params: {
                    searchMovieName: text
                }
            }).success(function (data, status) {
                console.log(data.results);
                console.log(status);
                $scope.movies = data.results;
            }).error(function (err) {
                console.log(err);
            });
        };

Upvotes: 3

Views: 4578

Answers (1)

I. R.
I. R.

Reputation: 21

JS

$scope.searchMovie = function(text) {
  return $http.get('api/movie', {
    params: {
      searchMovieName: text
    }
  });
}

IN your html

<md-autocomplete md-selected-item="selectedMovie"
 md-search-text="searchText"
 md-selected-item-change="selectedItemChange(movie)"
 md-items="movie in searchMovie(searchText)"
 md-item-text="movie.title"
 md-min-length="1" 
 placeholder="Search Movies">
  <md-item-template>
    <span md-highlight-text="searchText" md-highlight-flags="^i"> 
      {{movie.title}}
    </span>
  </md-item-template>
  <md-not-found>
    No Movies matching were found.
  </md-not-found>

$http.get is returns promise object which can be used in md-items. Like md-items="movie in searchMovie(searchText)"

Upvotes: 2

Related Questions