CODEWITHSUNDEEP
javascriptangularjsangular-material
Derek 朕會功夫
Derek 朕會功夫

Reputation: 94309

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.

Upvotes: 2

Views: 3759

Answers (2)

Praveen M
Praveen M

Reputation: 11

       <md-autocomplete flex
        md-search-text="searchText"
        md-items="item in search(searchText)"
        md-item-text="item.display"
        md-floating-label="Name"
        md-delay="100">
    <span md-highlight-text="searchText" md-highlight-flags="^i"> 
{{item.display}}</span>
<md-not-found>
Searchtext is invalid
</md-not-found>
</md-autocomplete>

AngularJs:

$scope.search = function(parum){
 var result = [{
    value: 1,
    display: "one"
}, {
    value: 2,
    display: "two"
}, {
    value: 3,
    display: "three"
}];
this.result = param ? this.result.filter(function(item) {
return (item.display.toUpperCase().indexOf(param.toUpperCase()) > -1);}) : 
this.result
return this.result
};

This the perfect way of using md-autocomplete and I prefer to use angular inside input tag as md-autocomplete contain many glitches and bugs.

Upvotes: 0

Divyanshu Maithani
Divyanshu Maithani

Reputation: 14976

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.

Upvotes: 3

Related Questions