Sjors Hijgenaar Sjors Hijgenaar - 3 months ago 13
AngularJS Question

md-autocomplete doesn't show li items text

I have a md-autocomplete field:

<md-autocomplete md-selected-item="videoInfo.lineUp[1]" md-items="item in searchQuery(searchText)" md-search-text="searchText" md-item-text="item.display"></md-autocomplete>


I populate
md-items
with

$scope.searchQuery = function (searchText) {
var users = [];
angular.forEach($scope.users,
function (value, key) {
// value = user object
// key = userId
var dN = value["display_name"];
if (dN) {
var obj = {};
obj[key] = value;
obj["display"] = dN;
if (dN.toLowerCase().indexOf(searchText.toLowerCase()) !== -1) {
users.push(obj);
}
}
});
return users;
}


It working in the sense that I can type in the input field and suggestions are loaded, however the dropdown is empty, i.e. it doesn't show
display_name
as I would have expected. When I select one of the options, the
display_name
of the selected item does show up in the input field. Any ideas what I could be doing wrong?

Answer

You need to define how you display information in the dropdown within the <md-autocomplete> tag. Here's an example - CodePen

Markup

<div ng-controller="AppCtrl as vm" ng-cloak="" ng-app="MyApp">
    <md-autocomplete flex
                 md-selected-item="text"
                 md-no-cache="true"
                 md-items="item in vm.items()"
                 md-min-length="0">
        <span id="autocompleteText" md-highlight-text="searchText">{{item}}</span>
    </md-autocomplete>
</div>

https://material.angularjs.org/latest/demo/autocomplete