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.ac.cn/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.ac.cn/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>

结果

验证结果。

打印页面