각도 재질-자동 완성
그만큼 md-autocomplete, Angular Directive는 사용자 지정 쿼리에 대해 가능한 모든 일치 항목을 표시하기 위해 내장 된 드롭 다운이있는 특수 입력 컨트롤로 사용됩니다. 이 컨트롤은 사용자가 입력 영역에 입력하자마자 실시간 제안 상자 역할을합니다.<md-autocomplete>로컬 또는 원격 데이터 소스에서 검색 결과를 제공하는 데 사용할 수 있습니다. md-autocomplete는 쿼리를 수행 할 때 결과를 캐시합니다. 첫 번째 호출 후 캐시 된 결과를 사용하여 불필요한 서버 요청이나 조회 논리를 제거하고 비활성화 할 수 있습니다.
속성
다음 표는 다양한 속성에 대한 매개 변수 및 설명을 나열합니다. md-autocomplete.
| Sr. 아니요 | 매개 변수 및 설명 |
|---|---|
| 1 | * md-items 검색에 대해 일치하는 항목을 반복 할 항목의 항목 형식의 표현식입니다. |
| 2 | md-selected-item-change 새 항목을 선택할 때마다 실행할 표현식입니다. |
| 삼 | 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 참이면 입력 요소에 즉시 초점을 맞 춥니 다. |
| 13 | md-autoselect 참이면 첫 번째 항목이 기본적으로 선택됩니다. |
| 14 | md-menu-class 스타일링을위한 드롭 다운 메뉴에 적용됩니다. |
| 15 | md-floating-label 이렇게하면 자동 완성에 플로팅 레이블이 추가되고 md-input-container에 래핑됩니다. |
| 16 | md-input-name FormController와 함께 사용할 입력 요소에 제공된 이름 속성입니다. |
| 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>결과
결과를 확인하십시오.