How develop angular autocomplete text box using Angular Material

In this tutorial we will learn how to develop angular autocomplete text box using Angular Material.

Steps involved in this tutorial: 
1) Registering the required scripts in bundle config.
2) Creating app.js for angularjs which will fetch the autocomplete list
3) Render Scripts in view
4) Binding autocomplete list data in view
5) Display the page

angular-animate.js
angular-aria.js
angular-messages.js

Register the files in bundle config:

bundles.Add(new ScriptBundle("~/bundles/angularanimatejs").Include("~/Scripts/angular-animate.js"));
bundles.Add(new ScriptBundle("~/bundles/angularariajs").Include("~/Scripts/angular-aria.js"));
bundles.Add(new ScriptBundle("~/bundles/angularmessagesjs").Include("~/Scripts/angular-messages.js"));
bundles.Add(new StyleBundle("~/Content/angularmaterialcss").Include("~/Content/angular-material.css"));
bundles.Add(new StyleBundle("~/Content/angularmateriallayoutcss").Include("~/Content/angular-material-layout.css"));

Now render these files into your view:

@Styles.Render("~/Content/angularmaterialcss")
@Styles.Render("~/Content/angularmateriallayoutcss")
@Scripts.Render("~/bundles/cdnangularjs")
@Scripts.Render("~/bundles/cdnangularresourcejs")
@Scripts.Render("~/bundles/angularanimatejs")
@Scripts.Render("~/bundles/angularariajs")
@Scripts.Render("~/bundles/angularmessagesjs")
@Scripts.Render("~/bundles/angularmaterialjs")
@Scripts.Render("~/bundles/appjs")

Now add below code in view:

<div class="autocompletedemoBasicUsage" ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak="">
<md-content class="md-padding">
    <form ng-submit="$event.preventDefault()">
        <p>Use <code>md-autocomplete</code> to search for matches from local or remote data sources.</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="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>
        <br>
        <md-checkbox ng-model="ctrl.simulateQuery">Simulate query for results?</md-checkbox>
        <md-checkbox ng-model="ctrl.noCache">Disable caching of queries?</md-checkbox>
        <md-checkbox ng-model="ctrl.isDisabled">Disable the input?</md-checkbox>

        <p>By default, <code>md-autocomplete</code> will cache results when performing a query.  After the initial call is performed, it will use the cached results to eliminate unnecessary server requests or lookup logic. This can be disabled above.</p>
    </form>
</md-content>

Write below code in app.js

(function ()
{
'use strict';
angular
.module('StockMarketApp', ['ngMaterial', 'ngMessages'])
.controller('DemoCtrl', DemoCtrl);

function DemoCtrl($timeout, $q, $log)
{
    var self = this;

    self.simulateQuery = false;
    self.isDisabled = false;
    // list of `state` value/display objects
    self.states = loadAll();
    self.querySearch = querySearch;
    self.selectedItemChange = selectedItemChange;
    self.searchTextChange = searchTextChange;

    self.newState = newState;

    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 searchTextChange(text)
    {
        $log.info('Text changed to ' + text);
    }

    function selectedItemChange(item)
    {
        $log.info('Item changed to ' + JSON.stringify(item));
    }

    function loadAll()
    {
        var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
            Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
            Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
            Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
            North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
            South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
            Wisconsin, Wyoming';

        return allStates.split(/, +/g).map(function (state)
        {
            return 
            {
                value: state.toLowerCase(),
                display: state
            };
        });
    }

    function createFilterFor(query) 
    {
        var lowercaseQuery = angular.lowercase(query);
        return function filterFn(state) 
        {
            return (state.value.indexOf(lowercaseQuery) === 0);
        };
    }
}
})();

Congrats! Finally you have learned how to create angular typeahead with Angular Material.