Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Auto complete using Angular Material

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 581
    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:

    <link href="~/Content/angular-material.min.css" rel="stylesheet" /> 
    <div ng-controller="AutoCompleteController as ctrl" layout="column" ng-cloak="" class="autocompletedemoBasicUsage" ng-app="MyApp">
        <md-content class="md-padding">
            <form ng-submit="$event.preventDefault()">
            <p>Select city</p>
                <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">
                    <md-item-template>
                        <span md-highlight-text="ctrl.searchText">{{item.display}}</span>
                    </md-item-template>
                    <md-not-found>
                        No city matching "{{ctrl.searchText}}" were found.
                    </md-not-found>
                </md-autocomplete>
                <br>
            </form>
        </md-content>
    </div>
    
    <script src="~/Scripts/angular.min.js"></script>  
    <script src="~/Scripts/angular-animate.min.js"></script>
    <script src="~/Scripts/angular-aria.js"></script>
    <script src="~/Scripts/angular-messages.min.js"></script>
    <script src="~/Scripts/angular-material/angular-material.min.js"></script>
    <script>
        (function () {
            'use strict';
            angular
                .module('MyApp', ['ngMaterial', 'ngMessages'])
                .controller('AutoCompleteController', AutoCompleteController);
    
            function AutoCompleteController($timeout, $q, $log) {
                var self = this;
    
                self.simulateQuery = false;
                self.isDisabled = false;
    
                // list of `city` value/display objects
                self.cities = loadAll();
                self.querySearch = querySearch;
                self.selectedItemChange = selectedItemChange;
                self.searchTextChange = searchTextChange;
    
                /**
                 * Search for cities... use $timeout to simulate
                 * remote dataservice call.
                 */
                function querySearch(query) {
                    var results = query ? self.cities.filter(createFilterFor(query)) : self.cities,
                        deferred;
                    if (self.simulateQuery) {
                        deferred = $q.defer();
                        $timeout(function () { deferred.resolve(results); }, Math.random() * 1000, false);
                        return deferred.promise;
                    } else {
                        return results;
                    }
                }
    
                function searchTextChange(text) {
                    $log.info('Text changed to ' + text);
                }
    
                function selectedItemChange(item) {
                    $log.info('Item changed to ' + JSON.stringify(item));
                }
    
                /**
                 * Build `cities` list of key/value pairs
                 */
                function loadAll() {
                    var allCities = 'Agra, Ahmedabad, Aligarh, Bareilly, Banglore , Bhopal, Chandigarh, Chennai, Dehradun,\
                                      Faizabad, Gurgoan, Ghaziabad, Hyderabad, Jaipur, Lucknow, Mumbai, Noida, Pune, Shimla';
    
                    return allCities.split(/, +/g).map(function (city) {
                        return {
                            value: city.toLowerCase(),
                            display: city
                        };
                    });
                }
    
                /**
                 * Create filter function for a query string
                 */
                function createFilterFor(query) {
                    var lowercaseQuery = angular.lowercase(query);
                    return function filterFn(city) {
                        return (city.value.indexOf(lowercaseQuery) === 0);
                    };
                }
            }
        })();
    
    </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

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: