Krasnyanskiy/search.html

## search.html
<html>
<head>
    <link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.css">
    <link rel="stylesheet" href="https://material.angularjs.org/1.1.1/docs.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
    <script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.js"></script>

    <script src="js/search.js"></script>
</head>
<body>
    <div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak="" ng-app="MyApp">
        <md-content class="md-padding">
            <form ng-submit="$event.preventDefault()" name="searchForm">
                <div layout-gt-sm="row">
                    <md-autocomplete flex=""
                                     md-selected-item="ctrl.selectedItem"
                                     md-search-text="ctrl.searchText"
                                     md-items="item in ctrl.querySearch(ctrl.searchText)"
                                     md-item-text="item.display">
                        <md-item-template>
                            <span md-highlight-text="ctrl.searchText">
                                {{item.display}}
                            </span>
                        </md-item-template>
                    </md-autocomplete>
                </div>
            </form>
        </md-content>
    </div>
</body>
</html>

## search.js
(function () {
    'use strict';
    angular
        .module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
        .controller('DemoCtrl', DemoCtrl);

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

        self.states = loadAll();
        self.querySearch = querySearch;

        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 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);
            };
        }
    }
})();
	<html>
	<head>
	<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.css">
	<link rel="stylesheet" href="https://material.angularjs.org/1.1.1/docs.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">

	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
	<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
	<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.js"></script>

	<script src="js/search.js"></script>
	</head>
	<body>
	<div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak="" ng-app="MyApp">
	<md-content class="md-padding">
	<form ng-submit="$event.preventDefault()" name="searchForm">
	<div layout-gt-sm="row">
	<md-autocomplete flex=""
	md-selected-item="ctrl.selectedItem"
	md-search-text="ctrl.searchText"
	md-items="item in ctrl.querySearch(ctrl.searchText)"
	md-item-text="item.display">
	<md-item-template>
	<span md-highlight-text="ctrl.searchText">
	{{item.display}}
	</span>
	</md-item-template>
	</md-autocomplete>
	</div>
	</form>
	</md-content>
	</div>
	</body>
	</html>
	(function () {
	'use strict';
	angular
	.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
	.controller('DemoCtrl', DemoCtrl);

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

	self.states = loadAll();
	self.querySearch = querySearch;

	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 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);
	};
	}
	}
	})();