<pre><code class="lang-html"><html lang = en>
<head>
<link rel = stylesheet
href = https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css>
<script src = https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js></script>
<script src = https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js></script>
<script src = https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js></script>
<script src = https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js></script>
<script src = https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js></script>
<script language = javascript>
angular
.module('f
irstApplication', ['ngMaterial'])
.controller('autoCompleteController', autoCompleteController);
function autoCompleteController ($timeout, $q, $log) {
var self = this;
self.simulateQuery = false;
self.is
disabled = false;
// list of states to be
displayed
self.states = loadStates();
self.querySearch = querySearch;
self.selectedItemChange = selectedItemChange;
self.searchTextChange = searchTextChange;
self.newState = newState;
function newState(state) {
alert(This functionality is yet to be implemented!);
}
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));
}
//build list of states as map of key-value pa
irs
function loadStates() {
var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
Maine, Maryland, Massachusetts, Michigan, Min
nesota, 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, Ten
nessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
Wisconsin, Wyoming';
return allStates.split(/, +/g).map( function (state) {
return {
value: state.toLowerCase(),
display: state
};
});
}
//filter function for search query
function createFilterFor(query) {
var lowercaseQuery = angular.lowercase(query);
return function filterFn(state) {
return (state.value.indexOf(lowercaseQuery) === 0);
};
}
}
</script>
</head>
<body ng-app = f
irstApplication ng-cloak>
<div ng-controller = autoCompleteController as ctrl layout = column ng-cloak>
<md-content class = md-padding>
<form ng-submit = $event.preventDefault()>
<p><code>md-autocomplete</code> can be used to provide search results from
local or remote data sources.</p>
<md-autocomplete
ng-
disabled = ctrl.is
disabled
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 = 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-check
Box ng-model = ctrl.simulateQuery>Show progress for results?
</md-check
Box>
<md-check
Box ng-model = ctrl.noCache>
disable caching?</md-check
Box>
<md-check
Box ng-model = ctrl.is
disabled>
disable?</md-check
Box>
<p><code>md-autocomplete</code> caches results when performing a query.
After f
irst call, it uses the cached results to eliminate unnecessary
server requests or lookup logic and it can be
disabled.</p>
</form>
</md-content>
</div>
</body>
</html>
</code></pre>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
