Angular Material Autocomplete With $http Call
What i'm trying to do is an Angular Material autocomplete (md-autocomplete) with data dynamically retrieved from an AJAX call to my REST API. Unfortunately I get only indeterminate
Solution 1:
(function() {
'use strict';
angular
.module('MyApp')
.controller('DemoCtrl', DemoCtrl);
functionDemoCtrl($http) {
var self = this;
self.data = null;
self.selectedItem = null;
self.searchText = null;
self.querySearch = function (query) {
$http.get('http://www.omdbapi.com/?s=' + escape(query))
.then(function(result) {
self.data = result.data.Search;
return result.data.Search;
});
}
}
})();<!DOCTYPE html><html ><head><metacharset="UTF-8"><title>$http md-Autocomplete</title><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"><linkrel='stylesheet prefetch'href='https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.0-rc4/angular-material.css'></head><body><divclass="autocompletedemoFloatingLabel"ng-controller="DemoCtrl as ctrl"ng-app="MyApp"layout="column"ng-cloak=""><md-contentclass="md-padding"><formname="searchForm"ng-submit="$event.preventDefault()"><divlayout-gt-sm="row"><md-input-containerflex=""><label>Name</label><inputtype="text"></md-input-container><md-autocompletemd-floating-label="Favorite movie"flex=""md-item-text="item.Title"md-items="item in ctrl.data"md-search-text-change="ctrl.querySearch(ctrl.searchText)"md-search-text="ctrl.searchText"md-selected-item="ctrl.selectedItem"md-no-cache="ctrl.noCache"md-input-maxlength="30"md-input-minlength="2"md-input-name="autocompleteField"required=""><md-item-template><spanmd-highlight-text="ctrl.searchText">{{item.Title}}</span></md-item-template><divng-messages="searchForm.autocompleteField.$error"ng-if="searchForm.autocompleteField.$touched"><divng-message="required">You <b>must</b> have a favorite movie.</div><divng-message="minlength">Your entry is not long enough.</div><divng-message="maxlength">Your entry is too long.</div></div></md-autocomplete></div></form></md-content></div><scriptsrc='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js'></script><scriptsrc='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-animate.min.js'></script><scriptsrc='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.min.js'></script><scriptsrc='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-aria.min.js'></script><scriptsrc='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-messages.min.js'></script><scriptsrc='https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.0-rc4/angular-material.js'></script><scriptsrc='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js'></script></body></html>Finally I have done it. Here is the solution.
Solution 2:
I struggled with this as well. I end up doing something like this:
$scope.querySearch=function(searchTerm) {
return$http({
url:"http://mysearch.api?keyword="+searchTerm,
method:"GET"
})
.then(function(res) {
return res.data;
}
}
Problem for me was that md-autocomplete need the result to be an array, where the response from $http is an object. I hope this help someone else!!
Solution 3:
You can use Angularjs promises to get data from $http call.
<body><formname="searchForm"ng-submit="searchForm.$valid && submit()"novalidate><md-autocompleteflex-gt-sm="35"requiredmd-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><spanmd-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><divng-messages="searchForm.autocompleteField.$error"ng-if="searchForm.autocompleteField.$touched"><divng-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;
functionquerySearch(query) {
var results = query ? $scope.getdataList.filter(createFilterFor(query)): $scope.getdataList, deferred;
return results;
}
functiongetData() {
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);
},functionmyError() {
console.log("Error")
});
return deferred.promise;
}
functioncreateFilterFor(query) {
var lowercaseQuery = query.toLowerCase();
returnfunctionfilterFn(state) {
var lowercaseState = state.value.toLowerCase();
return (lowercaseState.search(lowercaseQuery) >= 0);
};
}
</script>Solution 4:
Use $apply to kick a digest cycle yourself, it will update the view.
$scope.getCustomers = function (query) {
selectsService.getCustomers(query).then(function (results) {
$scope.customersSelect = results.data;
$scope.$apply();
console.log($scope.customersSelect);
}, function(error) {
alert(error.data.message);
});
}
Post a Comment for "Angular Material Autocomplete With $http Call"