md-autocomplete: Support md-item-text evals as promises

[epelc]

Right now using md-item-text with a promise shows [Object object] instead of what it resolves too. I couldn't find a way to get it too work with a promise so perhaps md-autocomplete could check if it's a promise and if so wait for it to resolve.

Please let me know if I can get around this some other way.

[ThomasBurleson]

Nice idea... to support query search returning a Promise.

https://github.com/angular/material/blob/master/src/components/autocomplete/js/autocompleteController.js#L305

[epelc]

@ThomasBurleson The query search returns just fine as a promise. I need to return a second promise for md-item-text which takes whatever you picked and formats it.

[ThomasBurleson]

At a high-level, the current support for promise-responses during fetchResults is reasonable.
But I do not think we will support this "mdItemText as a promise" however.

Please provide a CodePen or Plunkr that demonstrates this issue.

[epelc]

@ThomasBurleson Maybe my use case will help. I have an address field which I'm using autocomplete along with the google places api to auto complete any address. But the google places api requires a second details call to get each individual field separated out. I need this so I can fill in the rest of my form fields.

I'll get to work on a demo. As the only other way around this would be to make a call to the details api for every result in the auto complete list but that'd be super slow.

[epelc]

@ThomasBurleson Here is a demo. The first one shows a regular md-autocomplete without a promise on md-item-text. If you turn the switch on it will show the demo attempting to use a promise. This no matter what shows [Object object] after an item is selected. Note I hard coded the promise to resolve hello world but in my real app it is hooked up to the google places details api.

http://plnkr.co/edit/WZBTOhXi8xnLUdxFqruh?p=preview

I really hope you consider this. Please let me know if I can help at all.

[ThomasBurleson]

@epelc - Great follow-up. The use case and demo are very helpful. While I think this is an edge-case, I do not see any negative impacts on Angular Material with this enhancement.

And it is consistent with our approaches to support promises for notifications and chaining.

[epelc]

@ThomasBurleson I found a work around!

I really wanted to fix this but I found a workaround which is even better! Instead of using a promise with md-item-text you can use md-selected-item-change="selectItem(item) check if it's not null and then run your promise and use angular.extend() to copy your results to whatever model you use with md-selected-item.

Example markup

<md-autocomplete md-selected-item="Address.Address" md-search-text="addrSearchText" md-items="place in Maps.SearchForAddress(addrSearchText)" md-selected-item-change="selectedItem(place)" md-item-text="place.description || Address.Address" md-delay="200" md-floating-label="Address">
        <span md-highlight-text="addrSearchText" ng-bind="place.description"></span>
    </md-autocomplete>
//Below you have inputs for the zipcode city state etc

Example code

$scope.fmtPlace = function(place) {
    var deferred = $q.defer()
    //Sometimes place will be empty
    if (place) {
        //Call your func to fill in the data which returns a promise
        Maps.RawGeocode(place.description).then(function(loc) {
            deferred.resolve(loc)
        }, function(error) {
            deferred.reject(error)
        })
    } else {
        //This won't be nesecary after we fix the TODO in selectedItem()
        deferred.reject()
    }

    return deferred.promise
}

$scope.selectedItem = function(place) {
    //Note when you first focus on the autocomplete input place == null
    console.log('Selected an item:', $scope.Address.Address)
    if ($scope.Address.Address != null) {
        // Call your promise here
        // TODO possibly check if $scope.Address.Address is equal to what you just set it to.
        // So we can avoid the ocasional autocomplete menu popup after we set it
        $scope.fmtPlace(place).then(function(addr) {
            angular.extend($scope.Address, addr)
        })
    }
}

Please note in my example $scope.Address.Address is the address line the rest of the $scope.Address object contains things like city,state,country etc but the layout is really probably specific to your app.

@ThomasBurleson Anyways the above works perfectly for my use case and I think it will work for anyone else who needs a promise to fill in some details. Let me know if you want a working example for the docs.

[epelc]

I think I spoke too soon. The above works pretty damn good but there is a slight flash when you select an item it shows the items full text then it changes to what you fill in with the promise. A slight issue but I think using a promise with md-item-text would fix it 100% and get rid of this flash.

[water-melon91]

how to use json in autocomplete
sometime show
somtime not show data
this message "md-autocomplete: Could not resolve display value to a string. Please check the md-item-text attribute."
how to do that
help sir

[Splaktar]

@water-melon91 there are better avenues for troubleshooting or asking for help with your app. These include Stack Overflow, Gitter, this project's mailing list or forums, etc.