md-autocomplete not displayed

Question

I am giving angular material design a try and i cannot get md-autocomplete displayed.

I have included in my existing project:

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.7.0/angular-material.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.js"></script>

    <!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.js"></script>

    var storeApp = angular.module(
        'AngularStore', ['ui.router', 'ngMaterial',...])
    .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('auth.autocomplete', {
                url: '/autocomplete',
                templateUrl: 'resources/partials/autocomplete.html',
                controller: autocompleteCtrl,

            });
}]);

And autocomplete.html:

<div layout="column">

        <md-content class="md-padding" layout="column" style="min-height: 200px; padding-top: 50px;">

            <md-autocomplete md-selected-item="selectedItem" md-search-text="searchText" md-items="item in getMatches(searchText)" md-item-text="display" placeholder="Search...">
                <span md-highlight-text="searchText">{{item.display}}</span>
            </md-autocomplete>
        </md-content>
    </div>

My controller is empty:

function autocompleteCtrl($scope){

}

The generated html is:

<md-content class="md-padding md-default-theme" layout="column" style="min-height: 200px; padding-top: 50px;">

        <md-autocomplete md-selected-item="selectedItem" md-search-text="searchText" md-items="item in getMatches(searchText)" md-item-text="display" placeholder="Search...">
            <span md-highlight-text="searchText" class="ng-binding"></span>
        </md-autocomplete>
    </md-content>

while on the demo page:

<md-autocomplete md-selected-item="selectedItem" md-search-text="searchText" md-items="item in getMatches(searchText)" md-item-text="display" placeholder="Search..." class="ng-isolate-scope">        <md-autocomplete-wrap role="listbox">          <input type="text" ng-disabled="isDisabled" ng-model="searchText" ng-keydown="$mdAutocompleteCtrl.keydown($event)" ng-blur="$mdAutocompleteCtrl.blur()" placeholder="Search..." aria-label="Search..." aria-autocomplete="list" aria-haspopup="true" aria-activedescendant="" aria-expanded="false" class="ng-valid ng-dirty ng-valid-parse ng-touched" aria-owns="ul_001" tabindex="0" aria-invalid="false">          <!-- ngIf: searchText -->          <!-- ngIf: $mdAutocompleteCtrl.loading -->        </md-autocomplete-wrap>        <ul role="presentation" id="ul_001">          <!-- ngRepeat: (index, item) in $mdAutocompleteCtrl.matches -->        </ul>        <aria-status class="visually-hidden" role="status" aria-live="assertive">          <!-- ngRepeat: message in $mdAutocompleteCtrl.messages -->        </aria-status></md-autocomplete>

In my project I am also using bootstrap and jquery.

Thanks.

Answer 1

Check the version of angular_material you are using. I think autocomplete is only available on >0.8, not 0.7.0 (which you are using). Also, in your post I can't see a reference to the angular-material.min.js file. You might be including it somewhere else, just checking.

Hope that helps

Answer 2

how are you?

You can try to replace this line of code:

md-item-text="display"

For this:

md-item-text="item.display"

Hope this helps..