Vật liệu góc cạnh - Tự động hoàn thành

Các md-autocomplete, một Chỉ thị Angular, được sử dụng như một điều khiển đầu vào đặc biệt với một danh sách thả xuống có sẵn để hiển thị tất cả các kết quả phù hợp có thể có với một truy vấn tùy chỉnh. Điều khiển này hoạt động như một hộp gợi ý thời gian thực ngay khi người dùng nhập vào vùng nhập.<md-autocomplete>có thể được sử dụng để cung cấp kết quả tìm kiếm từ các nguồn dữ liệu cục bộ hoặc từ xa. md-autocomplete kết quả lưu vào bộ đệm khi thực hiện một truy vấn. Sau lần gọi đầu tiên, nó sử dụng kết quả được lưu trong bộ nhớ cache để loại bỏ các yêu cầu máy chủ hoặc logic tra cứu không cần thiết và nó có thể bị vô hiệu hóa.

Thuộc tính

Bảng sau liệt kê các tham số và mô tả về các thuộc tính khác nhau của md-autocomplete.

Sr.No Mô tả về Thông Số
1

* md-items

Một biểu thức ở định dạng mục trong các mục để lặp qua các kết quả phù hợp cho tìm kiếm của bạn.

2

md-selected-item-change

Một biểu thức sẽ được chạy mỗi khi một mục mới được chọn.

3

md-search-text-change

Một biểu thức sẽ được chạy mỗi khi văn bản tìm kiếm cập nhật.

4

md-search-text

Một mô hình để liên kết văn bản truy vấn tìm kiếm.

5

md-selected-item

Một mô hình để liên kết mục đã chọn.

6

md-item-text

Một biểu thức sẽ chuyển đổi đối tượng của bạn thành một chuỗi đơn.

7

placeholder

Văn bản giữ chỗ sẽ được chuyển tiếp tới đầu vào.

số 8

md-no-cache

Tắt bộ nhớ đệm nội bộ xảy ra trong tự động hoàn thành.

9

ng-disabled

Xác định xem có tắt trường nhập hay không.

10

md-min-length

Chỉ định độ dài tối thiểu của văn bản trước khi tính năng tự động hoàn thành sẽ đưa ra đề xuất.

11

md-delay

Chỉ định khoảng thời gian (tính bằng mili giây) để đợi trước khi tìm kiếm kết quả.

12

md-autofocus

Nếu đúng, sẽ ngay lập tức tập trung phần tử đầu vào.

13

md-autoselect

Nếu đúng, mục đầu tiên sẽ được chọn theo mặc định.

14

md-menu-class

Điều này sẽ được áp dụng cho menu thả xuống để tạo kiểu.

15

md-floating-label

Thao tác này sẽ thêm một nhãn nổi để tự động hoàn thành và bọc nó trong md-input-container.

16

md-input-name

Thuộc tính name được cấp cho phần tử đầu vào được sử dụng với FormController.

17

md-input-id

ID sẽ được thêm vào phần tử đầu vào.

18

md-input-minlength

Độ dài tối thiểu cho giá trị của đầu vào để xác thực.

19

md-input-maxlength

Độ dài tối đa cho giá trị của đầu vào để xác thực.

20

md-select-on-match

Khi được đặt là true, tính năng tự động điền sẽ tự động chọn mục chính xác nếu văn bản tìm kiếm khớp chính xác.

Thí dụ

Ví dụ sau đây cho thấy việc sử dụng md-autocomplete chỉ thị và cả việc sử dụng tính năng tự động hoàn thành.

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>

Kết quả

Xác minh kết quả.