CODEWITHSUNDEEP
javascriptangularjsautocompleteangular-materialmd-autocomplete
Atlas91
Atlas91

Reputation: 5904

md-autocomplete returns TypeError: Cannot read property 'then' of undefined

Using the md-autocomplete component from angular material I've got a problem:

<md-autocomplete
        required
        md-search-text="searchTxt"
        md-selected-item-change="setModelValue(item.name)"
        ng-model="searchTxt"
        md-search-text-change = "searchItem(searchTxt)"
        md-items="item in pickerResult"
        md-item-text="item.name"
        md-min-length="0"
        md-delay="100"
        placeholder="Search...">
    <md-item-template>
        <span md-highlight-text="searchTxt" md-highlight-flags="^i">{{item.title}}</span>
    </md-item-template>
    <md-not-found>
       No results <span data-ng-if="form.detailModel.aspectName != null">per</span> {{form.detailModel.aspectName}}
    </md-not-found>
</md-autocomplete>

this is the function in my controller

$scope.searchAspect = function(searchStr) {
    if(!searchStr) {
        var searchStrEncoded = "";
    } else {
        var searchStrEncoded = escape(searchStr);
    }
    var url = "/api/url&searchTxt=" + searchStrEncoded;
    $http({
        url: url,
        method: 'GET'
    }).success(function (data, status, headers, config) {
        $scope.pickerResult = data.data;
    });
};

If I type something I get the data. but on blur in the input I get this error: TypeError: Cannot read property 'then' of undefined and I can't get my data back. I tried to change the md-items directive in this way

md-items="item in searchItem(searchTxt)"

and I didn't get the error but the autocomplete shows no results even if the http call was successful. Any ideas?

EDIT with the promise

$scope.searchAspect = function(searchStr) {
        if(!searchStr) {
            var searchStrEncoded = "";
        } else {
            var searchStrEncoded = escape(searchStr);
        }
        var deferred = $q.defer();
        var url = "/api/url&searchTxt=" + searchStrEncoded;
        $http({
            url: url,
            method: 'GET'
        }).success(function (data, status, headers, config) {
            deferred.resolve(data.data);
            $scope.pickerResult = data.data;
        }).error(deferred.reject);
        return deferred.promise;
    };

same error

Upvotes: 0

Views: 2773

Answers (1)

Praveen Soni
Praveen Soni

Reputation: 780

try this

<md-autocomplete
        required
        md-search-text="searchTxt.val"
        md-items="item in searchAspect(searchTxt)"
        md-item-text="item.name"
        md-min-length="0"
        md-delay="100"
        placeholder="Search...">
    <md-item-template>
        <span md-highlight-text="searchTxt" md-highlight-flags="^i">{{item.title}}</span>
    </md-item-template>
    <md-not-found>
       No results <span data-ng-if="form.detailModel.aspectName != null">per</span> {{form.detailModel.aspectName}}
    </md-not-found>
</md-autocomplete>

$scope.searchAspect = function(searchStr) {
    if(!searchStr.val) {
        var searchStrEncoded = "";
    } else {
        var searchStrEncoded = escape(searchStr);
    }
    var url = "/api/url&searchTxt=" + searchStrEncoded;
    return $http({
        url: url,
        method: 'GET'
    }).then(function (data) {
        return data.data;
    });
};

as i understand md-items attributes needed a promise, and you are providing a array.

Upvotes: 1

Related Questions