Angular-material-autocomplete
角材-オートコンプリート
Angular Directiveである md-autocomplete は、カスタムクエリに一致する可能性のあるすべてを表示するための組み込みのドロップダウンを備えた特別な入力コントロールとして使用されます。 このコントロールは、ユーザーが入力領域に入力するとすぐに、リアルタイムの提案ボックスとして機能します。 <md-autocomplete> を使用して、ローカルまたはリモートのデータソースから検索結果を提供できます。 md-autocompleteは、クエリの実行時に結果をキャッシュします。 最初の呼び出しの後、キャッシュされた結果を使用して、不要なサーバー要求またはルックアップロジックを排除し、無効にすることができます。
属性
次の表に、 md-autocomplete のさまざまな属性のパラメーターと説明を示します。
| Sr.No | Parameter & Description |
|---|---|
| 1 |
検索の一致を反復処理するためのアイテム内のアイテムの形式の式。 |
| 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_*<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>結果
結果を確認します。
