AngularMaterial-オートコンプリート
ザ・ md-autocompleteAngularディレクティブは、カスタムクエリへのすべての可能な一致を表示するための組み込みのドロップダウンを備えた特別な入力コントロールとして使用されます。このコントロールは、ユーザーが入力領域に入力するとすぐに、リアルタイムの提案ボックスとして機能します。<md-autocomplete>ローカルまたはリモートのデータソースからの検索結果を提供するために使用できます。md-オートコンプリートは、クエリの実行時に結果をキャッシュします。最初の呼び出しの後、キャッシュされた結果を使用して、不要なサーバー要求またはルックアップロジックを排除し、無効にすることができます。
属性
次の表に、のさまざまな属性のパラメータと説明を示します。 md-autocomplete。
| シニア番号 | パラメータと説明 |
|---|---|
| 1 | * md-items 検索の一致を繰り返すためのアイテム内のアイテムの形式の式。 |
| 2 | md-selected-item-change 新しいアイテムが選択されるたびに実行される式。 |
| 3 | md-search-text-change 検索テキストが更新されるたびに実行される式。 |
| 4 | md-search-text 検索クエリテキストをバインドするモデル。 |
| 5 | md-selected-item 選択したアイテムをバインドするモデル。 |
| 6 | md-item-text オブジェクトを単一の文字列に変換する式。 |
| 7 | placeholder 入力に転送されるプレースホルダーテキスト。 |
| 8 | md-no-cache オートコンプリートで発生する内部キャッシュを無効にします。 |
| 9 | ng-disabled 入力フィールドを無効にするかどうかを決定します。 |
| 10 | md-min-length オートコンプリートが提案を行う前のテキストの最小長を指定します。 |
| 11 | md-delay 結果を探す前に待機する時間（ミリ秒単位）を指定します。 |
| 12 | md-autofocus trueの場合、入力要素にすぐにフォーカスします。 |
| 13 | md-autoselect trueの場合、デフォルトで最初の項目が選択されます。 |
| 14 | md-menu-class これは、スタイリングのドロップダウンメニューに適用されます。 |
| 15 | md-floating-label これにより、オートコンプリートにフローティングラベルが追加され、md-input-containerでラップされます。 |
| 16 | md-input-name FormControllerで使用されるinput要素に指定されたname属性。 |
| 17 | md-input-id 入力要素に追加されるID。 |
| 18 | md-input-minlength 検証用の入力値の最小の長さ。 |
| 19 | md-input-maxlength 検証用の入力値の最大長。 |
| 20 | md-select-on-match trueに設定すると、検索テキストが完全に一致する場合、オートコンプリートは自動的に完全一致のアイテムを選択します。 |
例
次の例は、 md-autocomplete ディレクティブとオートコンプリートの使用。
am_autocomplete.htm
<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('firstApplication', ['ngMaterial'])
.controller('autoCompleteController', autoCompleteController);
function autoCompleteController ($timeout, $q, $log) {
var self = this;
self.simulateQuery = false;
self.isDisabled = 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 pairs
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, 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
};
});
}
//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 = "firstApplication" 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.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 = "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">Show progress for results?
</md-checkbox>
<md-checkbox ng-model = "ctrl.noCache">Disable caching?</md-checkbox>
<md-checkbox ng-model = "ctrl.isDisabled">Disable?</md-checkbox>
<p><code>md-autocomplete</code> caches results when performing a query.
After first 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>結果
結果を確認します。