Question

180

Angular Material autocomplete with $http call

rated 0 times [ 187] [ 7] / answers: 1 / hits: 15610 / 9 Years ago, sun, november 22, 2015, 12:00:00

What i'm trying to do is an Angular Material autocomplete (md-autocomplete) with data dynamically retrieved from an AJAX call to my REST API. Unfortunately I get only indeterminate progress bar instead of autocomplete items as you can see below.

Result

Controller

$scope.customersSelect = {};

$scope.selectedItem = null;

$scope.searchText = null;



$scope.getCustomers = function (query) {

    selectsService.getCustomers(query).then(function (results) {

        $scope.customersSelect = results.data;

        console.log($scope.customersSelect);

    }, function(error) {

        alert(error.data.message);

    });

}

Service

var selectsServiceFactory = {};



_getCustomers = function (query) {

    return $http.get(serviceBase + 'api/selects/customers/' + query)

    .then(function(results) {

        return results;

    });

}



selectsServiceFactory.getCustomers = _getCustomers;



return selectsServiceFactory;

View

<md-autocomplete md-floating-label=Klient 

            autocomplete=off 

            flex= 

            md-search-text-change=getCustomers(searchText) 

            md-item-text=item 

            md-items=item in customersSelect 

            md-search-text=searchText 

            md-selected-item=machine.customerId 

            md-input-maxlength=100 

            md-input-minlength=2 

            md-input-name=machineOwner>

<md-item-template>

    <span md-highlight-text=searchText>{{item}}</span>

</md-item-template>

I'm getting the data successfully from the API, because I can see it printed in the console.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

anayaashleyh

Add To Favorites

Follow

Total Points: 597

Total Questions: 96

Total Answers: 86

Location: Papua New Guinea

Member since Thu, Jul 9, 2020

4 Years ago

answered 9 Years ago dustin · Accepted Answer

(function() {

  'use strict';

  angular

    .module('MyApp')

    .controller('DemoCtrl', DemoCtrl);



  function DemoCtrl($http) {

    var self = this;

    

    self.data = null;

    self.selectedItem = null;

    self.searchText = null;

    

    self.querySearch = function (query) {

      $http.get('http://www.omdbapi.com/?s=' + escape(query))

        .then(function(result) {

          self.data = result.data.Search;

          return result.data.Search;

        });

    }

  }

})();

<!DOCTYPE html>

<html >

  <head>

    <meta charset=UTF-8>

    <title>$http md-Autocomplete</title>

    <link rel=stylesheet href=https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic>

    

    

    <link rel='stylesheet prefetch' href='https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.0-rc4/angular-material.css'>

  </head>



  <body>



    <div class=autocompletedemoFloatingLabel ng-controller=DemoCtrl as ctrl ng-app=MyApp layout=column ng-cloak=>

      <md-content class=md-padding>

        <form name=searchForm ng-submit=$event.preventDefault()>

            <div layout-gt-sm=row>

            <md-input-container flex=>

              <label>Name</label>

              <input type=text>

            </md-input-container>

            <md-autocomplete md-floating-label=Favorite movie 

                            flex= 

                            md-item-text=item.Title

                            md-items=item in ctrl.data 

                            md-search-text-change=ctrl.querySearch(ctrl.searchText)

                            md-search-text=ctrl.searchText 

                            md-selected-item=ctrl.selectedItem 

                            md-no-cache=ctrl.noCache 

                            md-input-maxlength=30 

                            md-input-minlength=2 

                            md-input-name=autocompleteField 

                            required=>

              <md-item-template>

                <span md-highlight-text=ctrl.searchText>{{item.Title}}</span>

              </md-item-template>

              <div ng-messages=searchForm.autocompleteField.$error ng-if=searchForm.autocompleteField.$touched>

                <div ng-message=required>You <b>must</b> have a favorite movie.</div>

                <div ng-message=minlength>Your entry is not long enough.</div>

                <div ng-message=maxlength>Your entry is too long.</div>

              </div>

            </md-autocomplete>

          </div>

        </form>

      </md-content>

    </div>

    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js'></script>

    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-animate.min.js'></script>

    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.min.js'></script>

    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-aria.min.js'></script>

    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-messages.min.js'></script>

    <script src='https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.0-rc4/angular-material.js'></script>

    <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js'></script>    

  </body>

</html>

Finally I have done it. Here is the solution.