Full Stack Solutions
AngularJS-http

Angular Materialized Autocomplete With $http Service

Angular Materialized Autocomplete With $http Service

This article is about the Angular Materialized Autocomplete.The documentation of the Angular Materialized is here. This Documentation have different version of the Angular Materialized.Things You can try out with angularjs material autocomplete :

1) Simulate Query
2) Enable/Disable Caching
3) Disable the Autocomplete on an Event
4) Customization of Listing Template

Angular Materialized With $http Service :

The very first step is to set up the “ngMaterial” in your Application.This is just some copy and
paste with conditions apply.There are following dependencies in your Controller You need to inject

1) $timeout
2) $q
3) $log (Optional)
4) $http

Inject it into your controller.

App.controller('MyController',["$scope","$http","$timeout","$q","$log",function($scope,$http,$timeout,$q,$log) {

}]); 

There are following methods you will call in the Materialized Autocomplete :
1)

querySearch()

method is going to be same which is filtering the results with scope states.Hence the simulateQuery is  false then it will execute the else part.By Filterting the value with query parameter and scope.states that’s called from the $http.

    function querySearch (query) {
          var results = query ? self.states.filter( createFilterFor(query) ) : self.states, // 
              deferred;
          if (self.simulateQuery) {
            deferred = $q.defer();
            $timeout(function () { deferred.resolve( results ); }, Math.random() * 1000, false);
            return deferred.promise;
          } else {
            return results;
          }function querySearch (query) {
          var results = query ? self.states.filter( createFilterFor(query) ) : self.states, // 
              deferred;
          if (self.simulateQuery) {
            deferred = $q.defer();
            $timeout(function () { deferred.resolve( results ); }, Math.random() * 1000, false);
            return deferred.promise;
          } else {
            return results;
          }
        }

createFilterFor()

Method is custom filter to filter the query with lowercase query.

    function createFilterFor(query) {
      var lowercaseQuery = angular.lowercase(query);

      return function filterFn(state) {
        return (state.value.indexOf(lowercaseQuery) === 0);
      };
   }
   
    
    function searchTextChange(text) {
        //This method call when input text changes.
    }
    function selectedItemChange(item) {
        //This method call when user select some value from the suggestions of the autocomplete.
        
   }

selected-item-change()

selected-item-change() is the one which is also used to fetch the data according to the source.
This is the case of Country State API.Where You need to show the suggestions for the Country of User and on the
basis of Country You will call the State API by taking it’s country ID.

function loadAll() {
}

This method stands for consume the data from the API and convert the data into searchable object.Here is the
updated

loadAll()

By Fetching the data from the API it’s creating an Array of Objects that is used for comparing the value from the
query & in the last you can return the array.

This is the simplest way to load the Array to the Angular Materialized Autocomplete.You can also make the
factory and inject it into the Controller.

md-autocomplete usage in the html template.

 <md-autocomplete
              ng-disabled="ctrl.isDisabled"
              md-no-cache="ctrl.noCache"
              md-selected-item="ctrl.selectedItem"
              md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
              md-search-text="ctrl.searchText"
              md-selected-item-change="ctrl.selectedItemChange(item)"
              md-items="item in ctrl.querySearch(ctrl.searchText)"
              md-item-text="item.display"
              md-min-length="0"
              placeholder="What is your favorite US state?">
            <md-item-template>
              <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
            </md-item-template>
            <md-not-found>
              No states matching "{{ctrl.searchText}}" were found.
              <a ng-click="ctrl.newState(ctrl.searchText)">Create a new one!</a>
            </md-not-found>
     </md-autocomplete>

Screenshot :

Click here

Angular Materialized With $http Service
Angular Materialized With $http Service

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.

Most popular