각도 재질-자동 완성

그만큼 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>

결과

결과를 확인하십시오.