Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

md-autocomplete : $http promise fails to work #1798

Closed
kschwidder opened this issue Mar 5, 2015 · 7 comments
Closed

md-autocomplete : $http promise fails to work #1798

kschwidder opened this issue Mar 5, 2015 · 7 comments
Labels
resolution: fixed type: enhancement
Milestone
0.9.0

Comments

@kschwidder
Copy link

When the items are returned from an $http promise the md-autocomplete fails to work.
From a $http promise the data items are returned as response.data. md-autocomplete expects the data is passed back as an array.
The array is contained in the response.data object but md-autocomplete is reading response as the array which fails.

$scope.loadSkillTags = function (query) {
    var data = {qData: query};
    return SkillService.querySkills(data);
};
<md-autocomplete
         md-selected-item="data.selectedItem"
         md-search-text="data.searchText"
         md-items="item in loadSkillTags(data.searchText)"
         md-item-text="item"
         placeholder="Talent">
     <span md-highlight-text="data.searchText">{{item.name}}</span>
 </md-autocomplete>
@kschwidder
Copy link
Author

Workaround is like this

$scope.loadSkillTags = function (query) {
   var data = {qData: query};
   return SkillService.querySkills(data).then(function(response) {
    return response.data;
   });
};

@ThomasBurleson
Copy link
Contributor

@robertmesserle - I think we should check the return value from the promise and check it is is the standard $http response object... just to add a little smarts to the component.

@ThomasBurleson ThomasBurleson added this to the 0.9.0 milestone Mar 5, 2015
@robertmesserle
Copy link
Contributor

robertmesserle commented Mar 6, 2015 via email

@kschwidder
Copy link
Author

Great. Thx.

@david-gang david-gang mentioned this issue Mar 9, 2015
Closed
@robertmesserle robertmesserle mentioned this issue Mar 18, 2015
Closed
smehrbrodt added a commit to digitaldeacon/memberhive1 that referenced this issue Apr 29, 2015
@smehrbrodt
Fix search dropdown
ce38748 
Needed to switch to angular-material master branch because of
angular/material#1798

Should switch back to release branch when 0.10 is released (due May 1st)
@sombriks
Copy link

sombriks commented Sep 1, 2015

would be great if the docs get updated too
https://material.angularjs.org/latest/#/api/material.components.autocomplete/directive/mdAutocomplete

to support promises is a great thing and it's not mentioned in md-items

@winniehell winniehell mentioned this issue Jan 28, 2016
Closed
@balamanigandan
Copy link

md-autocomplete : $http promise never fails to work, it will work perfectly.

.then is a part of $http service

Kindly refer the post: Live code is available in the following post: http://stackoverflow.com/questions/35652828/http-issue-values-cant-be-returned-before-a-promise-is-resolved-in-angular-m

@ashishsiddhu
Copy link 

-You can use Angularjs promises to get data from $http call.
    <body>
            <form name="searchForm" ng-submit="searchForm.$valid && submit()" novalidate>
                <md-autocomplete flex-gt-sm="35"
            		      	required md-input-name="autocompleteField" 
            		      	md-input-maxlength="80" 
            		      	md-selected-item="selectedItem"
            		        md-search-text="formdata.searchText" 
            		        md-items="item in querySearch(formdata.searchText)" 
            		        md-item-text="item.display" 
            		        md-min-length="0"
            		        md-floating-label="Get Values">
            		        <md-item-template>
            		          <span md-highlight-text="formdata.searchText" md-highlight-flags="^i">{{item.display}}</span>
            		        </md-item-template>
            		        <md-not-found>
            		          No data matching "{{formdata.searchText}}" were found.
            		        </md-not-found>
            		        <div ng-messages="searchForm.autocompleteField.$error" ng-if="searchForm.autocompleteField.$touched">
            		          <div ng-message="required">Please <b>select</b> Pricing model id.</div>
            		        </div>
            	      	</md-autocomplete>
            </form>
         </body>
    <script>
    var getdataList= getData().then(function(greeting) {
    		  $scope.getdataList = greeting;
    	})
    	$scope.querySearch = querySearch;
    function querySearch(query) {
    		var results = query ? $scope.getdataList.filter(createFilterFor(query)): $scope.getdataList, deferred;
    			return results;
    		}
    function getData() {
    		deferred = $q.defer();
    		$http.get(url).then(function(response) {
    				var responseList = response.map(function (task) {
    					return {value: task.dataname, display:task.dataname}; 
    				});
    				deferred.resolve(responseList);
    			},function myError() {
    				console.log("Error")
    			});
    		return deferred.promise;
    	}
    function createFilterFor(query) {
    			var lowercaseQuery = query.toLowerCase();
    			  return function filterFn(state) {
    		    	var lowercaseState = state.value.toLowerCase();
    		      return (lowercaseState.search(lowercaseQuery) >= 0);
    		    };
    		}
    
    
    </script>

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
resolution: fixed type: enhancement
Projects
None yet
Milestone
0.9.0
Development

No branches or pull requests
7 participants
@ThomasBurleson @sombriks @robertmesserle @kschwidder @Splaktar @balamanigandan @ashishsiddhu