text input not shown with md-autocomplete

Question

I'm trying to use angular material's autocomplete component in my website.

in the html code I have:

     <md-autocomplete md-selected-item="selectedItem" md-search-text="searchText" md-items="item in getMatches(searchText)" md-item-text="item.display">
          <md-item-template>
              <span md-highlight-text="searchText">{{item.display}}</span>
          </md-item-template>
          <md-not-found>
              No matches found.
          </md-not-found>
      </md-autocomplete>

and in my controller I have the following:

app.controller('IndexController', function ($scope) {
    $scope.getMatches = function (text) {
        alert(text);
    }
}); 

as you see i didn't implement much. but if the autocomplete is trying to find something, it should execute getMatches and alert the text.

welp in my scenario it doesn't do anything but printing "No matches found."

there is no text input to enter text to search for.

what am I missing ?

jsfiddle at https://jsfiddle.net/p7wc8psy/

Answer 1

The DOM you making is correct.

 <md-autocomplete md-selected-item="selectedItem" md-search-text="searchText" md-items="item in getMatches(searchText)" md-item-text="item.display">
      <md-item-template>
          <span md-highlight-text="searchText">{{item.display}}</span>
      </md-item-template>
      <md-not-found>
          No matches found.
      </md-not-found>
  </md-autocomplete>

But the function shown below is wrong, because its not returning anything that is the reason you getting "No matches found."

app.controller('IndexController', function ($scope) {
    $scope.getMatches = function (text) {
        alert(text);//this does not return anything
    }
}); 

Now the next question what should it return.

It should return a JSON array like below.

[{
        value: "apple",
        display: "apple"
    }, {
        value: "banana",
        display: "banana"
    }, {
        value: "gauva",
        display: "gauva"
    }, {
        value: "melon",
        display: "melon"
    }, {
        value: "potato",
        display: "potato"
    }, {
        value: "carrot",
        display: "carrot"
    }, {
        value: "cauliflower",
        display: "cauliflower"
    }, {
        value: "jasmine",
        display: "jasmine"
    }, {
        value: "cabbage",
        display: "cabbage"
    }, {
        value: "peas",
        display: "peas"
    }]

What is the display key here in the JSON

Since you have mentioned here md-item-text="item.display" so the returned array must have the display key which is displayed in the auto-complete drop down.

So my search function looks like this:

$scope.myDta = [{
            value: "apple",
            display: "apple"
        }, {
            value: "banana",
            display: "banana"
        }, {
            value: "gauva",
            display: "gauva"
        }, {
            value: "melon",
            display: "melon"
        }, {
            value: "potato",
            display: "potato"
        }, {
            value: "carrot",
            display: "carrot"
        }, {
            value: "cauliflower",
            display: "cauliflower"
        }, {
            value: "jasmine",
            display: "jasmine"
        }, {
            value: "cabbage",
            display: "cabbage"
        }, {
            value: "peas",
            display: "peas"
        }];
        $scope.getMatches = function (text) {
            text = text.toLowerCase();
            var ret = $scope.myDta.filter(function (d) {
                //return element which starts with entered text
                return d.display.startsWith(text);
            });
            return ret;
        }

Working code here

Testcase: Type ca

Hope this helps!

Answer 2

I can't make your fiddle work. I've worked on it to get to https://jsfiddle.net/p7wc8psy/7/ but I think you need latest angular to run material, and that's hard to load in jsFiddle. You may want to switch to codepen or something else.

Meanwhile, I think what you are missing is:

<md-autocomplete 
     name="search-drink-autocomplete-input" 
     md-selected-item="selectedItem" 
     md-search-text="searchText" 
     md-items="item in getMatches(searchText)" 
     md-item-text="item.display"
     md-search-text-change="getMatches(searchtext)">  // *********