无法从md-autocomplete中的对象数组获取值

Question

I have an array of objects, and Now I am trying to select the data. Enclosed file is a snapshot of the object I am getting in console.

I want to get the emailid even if user search by the empid or empname or emailid from the object in autocomplete. But I am unable to retrieve this one when I start typing in md-autocomplete my screen blinks and never gave me list of filter items.
code :

<md-autocomplete flex required
                                md-search-text="searchText"
                                md-input-name="autocomplete"
                                md-search-text-change="searchTextChange(searchText)"
                                md-items="item in search(searchText)"
                                md-item-text="item"
                                md-floating-label="Reporting Manager">
                                    <md-item-template>
                                        <span md-highlight-text="searchText" md-highlight-flags="^i">{{item.empname}}</span>
                                    </md-item-template>
                                </md-autocomplete>

And this is my javascript search() function

$scope.search = function(text){
    var deferred = $q.defer()
    var result = []
    var resolve = function(reportingManager){
      //console.log(reportingManager)
      angular.forEach(reportingManager,function(val){
        //console.log(val)
        angular.forEach(val,function(value){
          //console.log(value)
          if(value.empid.toUpperCase().includes(text.toUpperCase())
            || value.empname.toUpperCase().includes(text.toUpperCase())){
            result.push(value.empname)
            //console.log(result)
          }
        })
      })
      deferred.resolve(result)
    }
    if(text){
      resolve(reportingManager? reportingManager: [])
    }else{
      resolve([]);
    }
    return deferred.promise
  }

reportingManager is an array of arrays which has the objects which i have included in the snapshot. Any help on this one would be highly appreciable
Regards

Answer 1

First of all I would like to thank @ Titus for being there for me and walking with me to solve my problem.

The issue was not only with Javascript code it was also with CSS. Since I was trying to put the md-autocomplete in a modal pop up after so many trials the autocomplete suggestions were coming up but it was behind the modal. Here is the working code

$scope.search = function(text){
        var deferred = $q.defer()
        var result = []
        var resolve = function(reportingManager){
          //console.log(reportingManager)
          angular.forEach(reportingManager,function(val){
            //console.log(val)
            angular.forEach(val,function(value){
              //console.log(value)
              if(value.empid.toUpperCase().includes(text.toUpperCase())
                || value.empname.toUpperCase().includes(text.toUpperCase())){
                result.push(value.emailid)
                //console.log(result)
              }
            })
          })
          deferred.resolve(result)
        }
        if(text){
          resolve(reportingManager? reportingManager: [])
        }else{
          resolve([]);
        }
        return deferred.promise
      }

HTML :

<div class="md-virtual-repeat-container">
                                    <md-autocomplete flex required
                                    md-search-text="searchText"
                                    md-input-name="autocomplete"
                                    md-search-text-change="searchTextChange(searchText)"
                                    md-items="item in search(searchText)"
                                    md-item-text="item"
                                    md-selected-item="selectedManager"
                                    md-floating-label="Reporting Manager">
                                    <md-item-template>
                                        <span md-highlight-text="searchText" md-highlight-flags="^i">{{item}}</span>
                                    </md-item-template>
                                </md-autocomplete>
                                </div>

In case you are trying to get the autocomplete in a pop up don't forget to set the high value for z-index

And also include the $q in your controller