Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Auto complete using Angular Material

    @mona.jain
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.06k
    Comment on it

    In Angular Material, we use  <md-autocomplete> for auto complete functionality. <md-autocomplete> is a UI component with dropdown to shown all possible  matches to custom query. It acts like a real time suggestion box. When user type inputs, the list is shown that match to user's input. It call the server only the first time, after that it uses the cached results to eliminate unnecessary server request.

     

    Here, below is the example of this:

    1. <link href="~/Content/angular-material.min.css" rel="stylesheet" /> 
    2. <div ng-controller="AutoCompleteController as ctrl" layout="column" ng-cloak="" class="autocompletedemoBasicUsage" ng-app="MyApp">
    3.     <md-content class="md-padding">
    4.         <form ng-submit="$event.preventDefault()">
    5.         <p>Select city</p>
    6.             <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="City">
    7.                 <md-item-template>
    8.                     <span md-highlight-text="ctrl.searchText">{{item.display}}</span>
    9.                 </md-item-template>
    10.                 <md-not-found>
    11.                     No city matching "{{ctrl.searchText}}" were found.
    12.                 </md-not-found>
    13.             </md-autocomplete>
    14.             <br>
    15.         </form>
    16.     </md-content>
    17. </div>
    18.  
    19. <script src="~/Scripts/angular.min.js"></script>  
    20. <script src="~/Scripts/angular-animate.min.js"></script>
    21. <script src="~/Scripts/angular-aria.js"></script>
    22. <script src="~/Scripts/angular-messages.min.js"></script>
    23. <script src="~/Scripts/angular-material/angular-material.min.js"></script>
    24. <script>
    25.     (function () {
    26.         'use strict';
    27.         angular
    28.             .module('MyApp', ['ngMaterial', 'ngMessages'])
    29.             .controller('AutoCompleteController', AutoCompleteController);
    30.  
    31.         function AutoCompleteController($timeout, $q, $log) {
    32.             var self = this;
    33.  
    34.             self.simulateQuery = false;
    35.             self.isDisabled = false;
    36.  
    37.             // list of `city` value/display objects
    38.             self.cities = loadAll();
    39.             self.querySearch = querySearch;
    40.             self.selectedItemChange = selectedItemChange;
    41.             self.searchTextChange = searchTextChange;
    42.  
    43.             /**
    44.              * Search for cities... use $timeout to simulate
    45.              * remote dataservice call.
    46.              */
    47.             function querySearch(query) {
    48.                 var results = query ? self.cities.filter(createFilterFor(query)) : self.cities,
    49.                     deferred;
    50.                 if (self.simulateQuery) {
    51.                     deferred = $q.defer();
    52.                     $timeout(function () { deferred.resolve(results); }, Math.random() * 1000, false);
    53.                     return deferred.promise;
    54.                 } else {
    55.                     return results;
    56.                 }
    57.             }
    58.  
    59.             function searchTextChange(text) {
    60.                 $log.info('Text changed to ' + text);
    61.             }
    62.  
    63.             function selectedItemChange(item) {
    64.                 $log.info('Item changed to ' + JSON.stringify(item));
    65.             }
    66.  
    67.             /**
    68.              * Build `cities` list of key/value pairs
    69.              */
    70.             function loadAll() {
    71.                 var allCities = 'Agra, Ahmedabad, Aligarh, Bareilly, Banglore , Bhopal, Chandigarh, Chennai, Dehradun,\
    72.                                   Faizabad, Gurgoan, Ghaziabad, Hyderabad, Jaipur, Lucknow, Mumbai, Noida, Pune, Shimla';
    73.  
    74.                 return allCities.split(/, +/g).map(function (city) {
    75.                     return {
    76.                         value: city.toLowerCase(),
    77.                         display: city
    78.                     };
    79.                 });
    80.             }
    81.  
    82.             /**
    83.              * Create filter function for a query string
    84.              */
    85.             function createFilterFor(query) {
    86.                 var lowercaseQuery = angular.lowercase(query);
    87.                 return function filterFn(city) {
    88.                     return (city.value.indexOf(lowercaseQuery) === 0);
    89.                 };
    90.             }
    91.         }
    92.     })();
    93.  
    94. </script>

     

    Attributes used in above example:

     

    1. md-content - <md-content> directive is used for scrollable container. To achieve this set CSS overflow  property to auto.
    2. md-autocomplete - <md-autocomplete> directive is used for dropdown to show all possible values enters by user input.
    3. ng-disabled - It check whether the input field is disabled or not.
    4. md-selected-item - It is a model to bind selected item.
    5. md-search-text-change -  An expression to run each time when search text change.
    6. md-search-text - It is a model to bind search query text.
    7. md-selected-item-change -  An expression to run each time when new item is selected
    8. md-items - An expression in the format of item in items to iterate match search.
    9. md-item-text - Expression that convert object to one string
    10. md-min-length - Set the minimum length that require for auto complete searching
    11. md-highlight-text - It highlight specify text within an element
    12. md-item-template - Create item template
    13. md-not-found - Create template for not found

     

    Hope, this example will help you. Thanks

    angular material Auto complete Angular js
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: