Учебники

Угловой материал — автозаполнение

Декабрь 8, 2018

Md-autocomplete , угловая директива, используется в качестве специального элемента управления вводом со встроенным раскрывающимся списком, чтобы показать все возможные совпадения с пользовательским запросом. Этот элемент управления действует как окно для подсказок в реальном времени, как только пользователь вводит данные в области ввода. <md-autocomplete> может использоваться для предоставления результатов поиска из локальных или удаленных источников данных. md-autocomplete кэширует результаты при выполнении запроса. После первого вызова он использует кэшированные результаты для устранения ненужных запросов к серверу или логики поиска и может быть отключен.

Атрибуты

В следующей таблице перечислены параметры и описание различных атрибутов md-autocomplete .

Sr.No Параметр и описание
1

* MD-предметы

Выражение в формате элемента в элементах для перебора совпадений для вашего поиска.

2

мкр-выбрано пункт-замена

Выражение, запускаемое при каждом выборе нового элемента.

3

мкр-поиск-текст изменения

Выражение, которое будет запускаться каждый раз, когда текст поиска обновляется.

4

мкр-поиск-текст

Модель для привязки текста поискового запроса.

5

мкр-выбран пункт-

Модель для привязки выбранного элемента.

6

мкр-элемент-текст

Выражение, которое преобразует ваш объект в одну строку.

7

заполнитель

Заполнитель текста, который будет перенаправлен на вход.

8

не мкр-не-кэша

Отключает внутреннее кэширование, которое происходит при автозаполнении.

9

нг-инвалидов

Определяет, следует ли отключить поле ввода.

10

мкр-мин Длина

Определяет минимальную длину текста, прежде чем автозаполнение сделает предложения.

11

мкр-задержка

Задает время ожидания (в миллисекундах) перед поиском результатов.

12

мкр-автофокусировка

Если true, сразу же будет сфокусирован элемент ввода.

13

мкр-автовыбор

Если true, первый элемент будет выбран по умолчанию.

14

мкр-меню класса

Это будет применено к выпадающему меню для стилизации.

15

мкр-плавающая этикетка

Это добавит плавающую метку для автозаполнения и поместит ее в контейнер md-input-container.

16

-ввода имя-мкр

Атрибут имени, данный элементу ввода для использования с FormController.

17

мкр-вход-идентификатор

Идентификатор, который будет добавлен к элементу ввода.

18

мкр-вход-MinLength

Минимальная длина значения ввода для проверки.

19

мкр-вход-MaxLength

Максимальная длина значения ввода для проверки.

20

мкр-выбрать-на-матч

Если установлено значение true, автозаполнение будет автоматически выбирать точный элемент, если текст поиска является точным соответствием.

* MD-предметы

Выражение в формате элемента в элементах для перебора совпадений для вашего поиска.

мкр-выбрано пункт-замена

Выражение, запускаемое при каждом выборе нового элемента.

мкр-поиск-текст изменения

Выражение, которое будет запускаться каждый раз, когда текст поиска обновляется.

мкр-поиск-текст

Модель для привязки текста поискового запроса.

мкр-выбран пункт-

Модель для привязки выбранного элемента.

мкр-элемент-текст

Выражение, которое преобразует ваш объект в одну строку.

заполнитель

Заполнитель текста, который будет перенаправлен на вход.

не мкр-не-кэша

Отключает внутреннее кэширование, которое происходит при автозаполнении.

нг-инвалидов

Определяет, следует ли отключить поле ввода.

мкр-мин Длина

Определяет минимальную длину текста, прежде чем автозаполнение сделает предложения.

мкр-задержка

Задает время ожидания (в миллисекундах) перед поиском результатов.

мкр-автофокусировка

Если true, сразу же будет сфокусирован элемент ввода.

мкр-автовыбор

Если true, первый элемент будет выбран по умолчанию.

мкр-меню класса

Это будет применено к выпадающему меню для стилизации.

мкр-плавающая этикетка

Это добавит плавающую метку для автозаполнения и поместит ее в контейнер md-input-container.

-ввода имя-мкр

Атрибут имени, данный элементу ввода для использования с FormController.

мкр-вход-идентификатор

Идентификатор, который будет добавлен к элементу ввода.

мкр-вход-MinLength

Минимальная длина значения ввода для проверки.

мкр-вход-MaxLength

Максимальная длина значения ввода для проверки.

мкр-выбрать-на-матч

Если установлено значение true, автозаполнение будет автоматически выбирать точный элемент, если текст поиска является точным соответствием.

пример

В следующем примере показано использование директивы md-autocomplete, а также использование autocomplete.

am_autocomplete.htm

Live Demo

<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>

Результат

Проверьте результат.

44
Share: