Derek 朕會功夫 Derek 朕會功夫 - 24 days ago 15
Javascript Question

md-autocomplete is not showing text

I'm using

md-autocomplete
for autocompletion, however for some reason the dropdown is not including the text that I want it to include. Here is a simplified demo of the issue:

<md-autocomplete flex
md-search-text="searchText"
md-input-name="p"
md-items="item in search(searchText)"
md-item-text="item.display"
md-floating-label="Name"
md-delay="100"
>
</md-autocomplete>


$scope.search = function(){
return $q.resolve([{
value: 1,
display: "one"
}, {
value: 2,
display: "two"
}, {
value: 3,
display: "three"
}]);
};


Take a look at this fiddle for a demonstration of the problem.

Answer

You haven't included md-item-template in your md-autocomplete. Your md-autocomplete should look something like this:

<md-autocomplete flex
            md-search-text="searchText"
            md-input-name="p"
            md-items="item in search(searchText)"
            md-item-text="item.display"
            md-floating-label="Name"
            md-delay="100"
    >
    <md-item-template>
        <span md-highlight-text="searchText" md-highlight-flags="^i">{{item.display}}</span>
    </md-item-template>
</md-autocomplete>

Here is a working fork of your code.

Comments