Angular Material - 自動完成

md-autocomplete是一個Angular指令，用作帶有內建下拉列表的特殊輸入控制元件，用於顯示與自定義查詢匹配的所有可能結果。此控制元件充當即時建議框，使用者在輸入區域輸入時立即顯示。<md-autocomplete>可用於從本地或遠端資料來源提供搜尋結果。md-autocomplete 在執行查詢時快取結果。第一次呼叫後，它使用快取的結果來消除不必要的伺服器請求或查詢邏輯，並且可以停用。

屬性

下表列出了md-autocomplete的不同屬性的引數和描述。

序號	引數及描述
1	* md-items 以 item in items 格式表示的表示式，用於迭代搜尋匹配項。
2	md-selected-item-change 每次選擇新專案時要執行的表示式。
3	md-search-text-change 每次搜尋文字更新時要執行的表示式。
4	md-search-text 繫結搜尋查詢文字的模型。
5	md-selected-item 繫結所選專案的模型。
6	md-item-text 將物件轉換為單個字串的表示式。
7	佔位符將轉發到輸入的佔位符文字。
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>

結果

驗證結果。

列印頁面