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