Why my md-autoComplete is not displaying return values

Question

I am using Angular Material for the first time. I am stuck with an issue with autocomplete. Below is my template:

<md-autocomplete class="flex"
                 md-no-cache="true"
                 md-selected-item="c.receipt"
                 md-item-text="item.name"
                 md-search-text="SearchText"
                 md-items="item in querySearch(SearchText)"
                 md-floating-label="search">
    <md-item-template>
        <span><span class="search-result-type">{{item.GEOType}}</span><span md-highlight-text="SearchText">{{item.GEOName+(item.country?' / '+item.country:'')}}</span></span>
    </md-item-template>
    <md-not-found>No matches found.</md-not-found>
</md-autocomplete>

And in ctrl I have:

$scope.querySearch = function (query) {
    var GeoDataAPIUrl = '/api/TargetSettings/RetrieveCorridorLeverValues';
    if (query.length < 5)
        return;
    else {
        var GeoDataSearchUrl = GeoDataAPIUrl + '?' + 'strGeoName=' + query;
        $http
            .get(GeoDataSearchUrl)
            .then(function (geoAPIResponse) {
                console.log("GeoAPIResponse was ", geoAPIResponse);
                return geoAPIResponse.data;
            },
            function (geoAPIError) {
                console.log("GeoAPI call failed ", geoAPIError);
            });
    }
};

With above code, I am getting nothing as suggestions, only my not-found text is displayed, while my http call return an array which is printed in console too. Am I missing something??

I saw at many places, people have used some filters with autocomplete, I dont think that is something essential.

Pls advice how to make above work.

You have to return promise when you doing search via remote check here http://stackoverflow.com/questions/29512238/material-design-angular-md-autocomplete-remote — Cyril Cherian, Nov 29 '15 at 08:24

score 1 · Answer 1 · edited Aug 10 '17 at 10:36

$http returns promise and md-autocomplete uses same promise to display the result. In your case you are returning result but not promise. Your code should be

$scope.querySearch = function (query) {
    var GeoDataAPIUrl = '/api/TargetSettings/RetrieveCorridorLeverValues';
    if (query.length < 5)
        return;
    else {
        var GeoDataSearchUrl = GeoDataAPIUrl + '?' + 'strGeoName=' + query;
        var promise = $http.get(GeoDataSearchUrl).then(function (geoAPIResponse) {
            console.log("GeoAPIResponse was ", geoAPIResponse);
            return geoAPIResponse.data;
        },
            function (geoAPIError) {
                console.log("GeoAPI call failed ", geoAPIError);
            });
        return promise;
    }
};

It will work now.

Why my md-autoComplete is not displaying return values

1 Answers1