/*! * Angular Material Design * https://github.com/angular/material * @license MIT * v1.1.3 */ (function( window, angular, undefined ){ "use strict"; /** * @ngdoc module * @name material.components.autocomplete */ /* * @see js folder for autocomplete implementation */ angular.module('material.components.autocomplete', [ 'material.core', 'material.components.icon', 'material.components.virtualRepeat' ]); MdAutocompleteCtrl['$inject'] = ["$scope", "$element", "$mdUtil", "$mdConstant", "$mdTheming", "$window", "$animate", "$rootElement", "$attrs", "$q", "$log", "$mdLiveAnnouncer"];angular .module('material.components.autocomplete') .controller('MdAutocompleteCtrl', MdAutocompleteCtrl); var ITEM_HEIGHT = 48, MAX_ITEMS = 5, MENU_PADDING = 8, INPUT_PADDING = 2; // Padding provided by `md-input-container` function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming, $window, $animate, $rootElement, $attrs, $q, $log, $mdLiveAnnouncer) { // Internal Variables. var ctrl = this, itemParts = $scope.itemsExpr.split(/ in /i), itemExpr = itemParts[ 1 ], elements = null, cache = {}, noBlur = false, selectedItemWatchers = [], hasFocus = false, fetchesInProgress = 0, enableWrapScroll = null, inputModelCtrl = null, debouncedOnResize = $mdUtil.debounce(onWindowResize); // Public Exported Variables with handlers defineProperty('hidden', handleHiddenChange, true); // Public Exported Variables ctrl.scope = $scope; ctrl.parent = $scope.$parent; ctrl.itemName = itemParts[ 0 ]; ctrl.matches = []; ctrl.loading = false; ctrl.hidden = true; ctrl.index = null; ctrl.id = $mdUtil.nextUid(); ctrl.isDisabled = null; ctrl.isRequired = null; ctrl.isReadonly = null; ctrl.hasNotFound = false; // Public Exported Methods ctrl.keydown = keydown; ctrl.blur = blur; ctrl.focus = focus; ctrl.clear = clearValue; ctrl.select = select; ctrl.listEnter = onListEnter; ctrl.listLeave = onListLeave; ctrl.mouseUp = onMouseup; ctrl.getCurrentDisplayValue = getCurrentDisplayValue; ctrl.registerSelectedItemWatcher = registerSelectedItemWatcher; ctrl.unregisterSelectedItemWatcher = unregisterSelectedItemWatcher; ctrl.notFoundVisible = notFoundVisible; ctrl.loadingIsVisible = loadingIsVisible; ctrl.positionDropdown = positionDropdown; /** * Report types to be used for the $mdLiveAnnouncer * @enum {number} Unique flag id. */ var ReportType = { Count: 1, Selected: 2 }; return init(); //-- initialization methods /** * Initialize the controller, setup watchers, gather elements */ function init () { $mdUtil.initOptionalProperties($scope, $attrs, { searchText: '', selectedItem: null, clearButton: false }); $mdTheming($element); configureWatchers(); $mdUtil.nextTick(function () { gatherElements(); moveDropdown(); // Forward all focus events to the input element when autofocus is enabled if ($scope.autofocus) { $element.on('focus', focusInputElement); } }); } function updateModelValidators() { if (!$scope.requireMatch || !inputModelCtrl) return; inputModelCtrl.$setValidity('md-require-match', !!$scope.selectedItem || !$scope.searchText); } /** * Calculates the dropdown's position and applies the new styles to the menu element * @returns {*} */ function positionDropdown () { if (!elements) { return $mdUtil.nextTick(positionDropdown, false, $scope); } var dropdownHeight = ($scope.dropdownItems || MAX_ITEMS) * ITEM_HEIGHT; var hrect = elements.wrap.getBoundingClientRect(), vrect = elements.snap.getBoundingClientRect(), root = elements.root.getBoundingClientRect(), top = vrect.bottom - root.top, bot = root.bottom - vrect.top, left = hrect.left - root.left, width = hrect.width, offset = getVerticalOffset(), position = $scope.dropdownPosition, styles; // Automatically determine dropdown placement based on available space in viewport. if (!position) { position = (top > bot && root.height - hrect.bottom - MENU_PADDING < dropdownHeight) ? 'top' : 'bottom'; } // Adjust the width to account for the padding provided by `md-input-container` if ($attrs.mdFloatingLabel) { left += INPUT_PADDING; width -= INPUT_PADDING * 2; } styles = { left: left + 'px', minWidth: width + 'px', maxWidth: Math.max(hrect.right - root.left, root.right - hrect.left) - MENU_PADDING + 'px' }; if (position === 'top') { styles.top = 'auto'; styles.bottom = bot + 'px'; styles.maxHeight = Math.min(dropdownHeight, hrect.top - root.top - MENU_PADDING) + 'px'; } else { var bottomSpace = root.bottom - hrect.bottom - MENU_PADDING + $mdUtil.getViewportTop(); styles.top = (top - offset) + 'px'; styles.bottom = 'auto'; styles.maxHeight = Math.min(dropdownHeight, bottomSpace) + 'px'; } elements.$.scrollContainer.css(styles); $mdUtil.nextTick(correctHorizontalAlignment, false); /** * Calculates the vertical offset for floating label examples to account for ngMessages * @returns {number} */ function getVerticalOffset () { var offset = 0; var inputContainer = $element.find('md-input-container'); if (inputContainer.length) { var input = inputContainer.find('input'); offset = inputContainer.prop('offsetHeight'); offset -= input.prop('offsetTop'); offset -= input.prop('offsetHeight'); // add in the height left up top for the floating label text offset += inputContainer.prop('offsetTop'); } return offset; } /** * Makes sure that the menu doesn't go off of the screen on either side. */ function correctHorizontalAlignment () { var dropdown = elements.scrollContainer.getBoundingClientRect(), styles = {}; if (dropdown.right > root.right - MENU_PADDING) { styles.left = (hrect.right - dropdown.width) + 'px'; } elements.$.scrollContainer.css(styles); } } /** * Moves the dropdown menu to the body tag in order to avoid z-index and overflow issues. */ function moveDropdown () { if (!elements.$.root.length) return; $mdTheming(elements.$.scrollContainer); elements.$.scrollContainer.detach(); elements.$.root.append(elements.$.scrollContainer); if ($animate.pin) $animate.pin(elements.$.scrollContainer, $rootElement); } /** * Sends focus to the input element. */ function focusInputElement () { elements.input.focus(); } /** * Sets up any watchers used by autocomplete */ function configureWatchers () { var wait = parseInt($scope.delay, 10) || 0; $attrs.$observe('disabled', function (value) { ctrl.isDisabled = $mdUtil.parseAttributeBoolean(value, false); }); $attrs.$observe('required', function (value) { ctrl.isRequired = $mdUtil.parseAttributeBoolean(value, false); }); $attrs.$observe('readonly', function (value) { ctrl.isReadonly = $mdUtil.parseAttributeBoolean(value, false); }); $scope.$watch('searchText', wait ? $mdUtil.debounce(handleSearchText, wait) : handleSearchText); $scope.$watch('selectedItem', selectedItemChange); angular.element($window).on('resize', debouncedOnResize); $scope.$on('$destroy', cleanup); } /** * Removes any events or leftover elements created by this controller */ function cleanup () { if (!ctrl.hidden) { $mdUtil.enableScrolling(); } angular.element($window).off('resize', debouncedOnResize); if ( elements ){ var items = ['ul', 'scroller', 'scrollContainer', 'input']; angular.forEach(items, function(key){ elements.$[key].remove(); }); } } /** * Event handler to be called whenever the window resizes. */ function onWindowResize() { if (!ctrl.hidden) { positionDropdown(); } } /** * Gathers all of the elements needed for this controller */ function gatherElements () { var snapWrap = gatherSnapWrap(); elements = { main: $element[0], scrollContainer: $element[0].querySelector('.md-virtual-repeat-container'), scroller: $element[0].querySelector('.md-virtual-repeat-scroller'), ul: $element.find('ul')[0], input: $element.find('input')[0], wrap: snapWrap.wrap, snap: snapWrap.snap, root: document.body }; elements.li = elements.ul.getElementsByTagName('li'); elements.$ = getAngularElements(elements); inputModelCtrl = elements.$.input.controller('ngModel'); } /** * Gathers the snap and wrap elements * */ function gatherSnapWrap() { var element; var value; for (element = $element; element.length; element = element.parent()) { value = element.attr('md-autocomplete-snap'); if (angular.isDefined(value)) break; } if (element.length) { return { snap: element[0], wrap: (value.toLowerCase() === 'width') ? element[0] : $element.find('md-autocomplete-wrap')[0] }; } var wrap = $element.find('md-autocomplete-wrap')[0]; return { snap: wrap, wrap: wrap }; } /** * Gathers angular-wrapped versions of each element * @param elements * @returns {{}} */ function getAngularElements (elements) { var obj = {}; for (var key in elements) { if (elements.hasOwnProperty(key)) obj[ key ] = angular.element(elements[ key ]); } return obj; } //-- event/change handlers /** * Handles changes to the `hidden` property. * @param hidden * @param oldHidden */ function handleHiddenChange (hidden, oldHidden) { if (!hidden && oldHidden) { positionDropdown(); // Report in polite mode, because the screenreader should finish the default description of // the input. element. reportMessages(true, ReportType.Count | ReportType.Selected); if (elements) { $mdUtil.disableScrollAround(elements.ul); enableWrapScroll = disableElementScrollEvents(angular.element(elements.wrap)); } } else if (hidden && !oldHidden) { $mdUtil.enableScrolling(); if (enableWrapScroll) { enableWrapScroll(); enableWrapScroll = null; } } } /** * Disables scrolling for a specific element */ function disableElementScrollEvents(element) { function preventDefault(e) { e.preventDefault(); } element.on('wheel', preventDefault); element.on('touchmove', preventDefault); return function() { element.off('wheel', preventDefault); element.off('touchmove', preventDefault); }; } /** * When the user mouses over the dropdown menu, ignore blur events. */ function onListEnter () { noBlur = true; } /** * When the user's mouse leaves the menu, blur events may hide the menu again. */ function onListLeave () { if (!hasFocus && !ctrl.hidden) elements.input.focus(); noBlur = false; ctrl.hidden = shouldHide(); } /** * When the mouse button is released, send focus back to the input field. */ function onMouseup () { elements.input.focus(); } /** * Handles changes to the selected item. * @param selectedItem * @param previousSelectedItem */ function selectedItemChange (selectedItem, previousSelectedItem) { updateModelValidators(); if (selectedItem) { getDisplayValue(selectedItem).then(function (val) { $scope.searchText = val; handleSelectedItemChange(selectedItem, previousSelectedItem); }); } else if (previousSelectedItem && $scope.searchText) { getDisplayValue(previousSelectedItem).then(function(displayValue) { // Clear the searchText, when the selectedItem is set to null. // Do not clear the searchText, when the searchText isn't matching with the previous // selected item. if (angular.isString($scope.searchText) && displayValue.toString().toLowerCase() === $scope.searchText.toLowerCase()) { $scope.searchText = ''; } }); } if (selectedItem !== previousSelectedItem) announceItemChange(); } /** * Use the user-defined expression to announce changes each time a new item is selected */ function announceItemChange () { angular.isFunction($scope.itemChange) && $scope.itemChange(getItemAsNameVal($scope.selectedItem)); } /** * Use the user-defined expression to announce changes each time the search text is changed */ function announceTextChange () { angular.isFunction($scope.textChange) && $scope.textChange(); } /** * Calls any external watchers listening for the selected item. Used in conjunction with * `registerSelectedItemWatcher`. * @param selectedItem * @param previousSelectedItem */ function handleSelectedItemChange (selectedItem, previousSelectedItem) { selectedItemWatchers.forEach(function (watcher) { watcher(selectedItem, previousSelectedItem); }); } /** * Register a function to be called when the selected item changes. * @param cb */ function registerSelectedItemWatcher (cb) { if (selectedItemWatchers.indexOf(cb) == -1) { selectedItemWatchers.push(cb); } } /** * Unregister a function previously registered for selected item changes. * @param cb */ function unregisterSelectedItemWatcher (cb) { var i = selectedItemWatchers.indexOf(cb); if (i != -1) { selectedItemWatchers.splice(i, 1); } } /** * Handles changes to the searchText property. * @param searchText * @param previousSearchText */ function handleSearchText (searchText, previousSearchText) { ctrl.index = getDefaultIndex(); // do nothing on init if (searchText === previousSearchText) return; updateModelValidators(); getDisplayValue($scope.selectedItem).then(function (val) { // clear selected item if search text no longer matches it if (searchText !== val) { $scope.selectedItem = null; // trigger change event if available if (searchText !== previousSearchText) announceTextChange(); // cancel results if search text is not long enough if (!isMinLengthMet()) { ctrl.matches = []; setLoading(false); reportMessages(false, ReportType.Count); } else { handleQuery(); } } }); } /** * Handles input blur event, determines if the dropdown should hide. */ function blur($event) { hasFocus = false; if (!noBlur) { ctrl.hidden = shouldHide(); evalAttr('ngBlur', { $event: $event }); } } /** * Force blur on input element * @param forceBlur */ function doBlur(forceBlur) { if (forceBlur) { noBlur = false; hasFocus = false; } elements.input.blur(); } /** * Handles input focus event, determines if the dropdown should show. */ function focus($event) { hasFocus = true; if (isSearchable() && isMinLengthMet()) { handleQuery(); } ctrl.hidden = shouldHide(); evalAttr('ngFocus', { $event: $event }); } /** * Handles keyboard input. * @param event */ function keydown (event) { switch (event.keyCode) { case $mdConstant.KEY_CODE.DOWN_ARROW: if (ctrl.loading) return; event.stopPropagation(); event.preventDefault(); ctrl.index = Math.min(ctrl.index + 1, ctrl.matches.length - 1); updateScroll(); reportMessages(false, ReportType.Selected); break; case $mdConstant.KEY_CODE.UP_ARROW: if (ctrl.loading) return; event.stopPropagation(); event.preventDefault(); ctrl.index = ctrl.index < 0 ? ctrl.matches.length - 1 : Math.max(0, ctrl.index - 1); updateScroll(); reportMessages(false, ReportType.Selected); break; case $mdConstant.KEY_CODE.TAB: // If we hit tab, assume that we've left the list so it will close onListLeave(); if (ctrl.hidden || ctrl.loading || ctrl.index < 0 || ctrl.matches.length < 1) return; select(ctrl.index); break; case $mdConstant.KEY_CODE.ENTER: if (ctrl.hidden || ctrl.loading || ctrl.index < 0 || ctrl.matches.length < 1) return; if (hasSelection()) return; event.stopPropagation(); event.preventDefault(); select(ctrl.index); break; case $mdConstant.KEY_CODE.ESCAPE: event.preventDefault(); // Prevent browser from always clearing input if (!shouldProcessEscape()) return; event.stopPropagation(); clearSelectedItem(); if ($scope.searchText && hasEscapeOption('clear')) { clearSearchText(); } // Manually hide (needed for mdNotFound support) ctrl.hidden = true; if (hasEscapeOption('blur')) { // Force the component to blur if they hit escape doBlur(true); } break; default: } } //-- getters /** * Returns the minimum length needed to display the dropdown. * @returns {*} */ function getMinLength () { return angular.isNumber($scope.minLength) ? $scope.minLength : 1; } /** * Returns the display value for an item. * @param item * @returns {*} */ function getDisplayValue (item) { return $q.when(getItemText(item) || item).then(function(itemText) { if (itemText && !angular.isString(itemText)) { $log.warn('md-autocomplete: Could not resolve display value to a string. ' + 'Please check the `md-item-text` attribute.'); } return itemText; }); /** * Getter function to invoke user-defined expression (in the directive) * to convert your object to a single string. */ function getItemText (item) { return (item && $scope.itemText) ? $scope.itemText(getItemAsNameVal(item)) : null; } } /** * Returns the locals object for compiling item templates. * @param item * @returns {{}} */ function getItemAsNameVal (item) { if (!item) return undefined; var locals = {}; if (ctrl.itemName) locals[ ctrl.itemName ] = item; return locals; } /** * Returns the default index based on whether or not autoselect is enabled. * @returns {number} */ function getDefaultIndex () { return $scope.autoselect ? 0 : -1; } /** * Sets the loading parameter and updates the hidden state. * @param value {boolean} Whether or not the component is currently loading. */ function setLoading(value) { if (ctrl.loading != value) { ctrl.loading = value; } // Always refresh the hidden variable as something else might have changed ctrl.hidden = shouldHide(); } /** * Determines if the menu should be hidden. * @returns {boolean} */ function shouldHide () { if (!isSearchable()) return true; // Hide when not able to query else return !shouldShow(); // Hide when the dropdown is not able to show. } /** * Determines whether the autocomplete is able to query within the current state. * @returns {boolean} */ function isSearchable() { if (ctrl.loading && !hasMatches()) return false; // No query when query is in progress. else if (hasSelection()) return false; // No query if there is already a selection else if (!hasFocus) return false; // No query if the input does not have focus return true; } /** * Determines if the escape keydown should be processed * @returns {boolean} */ function shouldProcessEscape() { return hasEscapeOption('blur') || !ctrl.hidden || ctrl.loading || hasEscapeOption('clear') && $scope.searchText; } /** * Determines if an escape option is set * @returns {boolean} */ function hasEscapeOption(option) { return !$scope.escapeOptions || $scope.escapeOptions.toLowerCase().indexOf(option) !== -1; } /** * Determines if the menu should be shown. * @returns {boolean} */ function shouldShow() { return (isMinLengthMet() && hasMatches()) || notFoundVisible(); } /** * Returns true if the search text has matches. * @returns {boolean} */ function hasMatches() { return ctrl.matches.length ? true : false; } /** * Returns true if the autocomplete has a valid selection. * @returns {boolean} */ function hasSelection() { return ctrl.scope.selectedItem ? true : false; } /** * Returns true if the loading indicator is, or should be, visible. * @returns {boolean} */ function loadingIsVisible() { return ctrl.loading && !hasSelection(); } /** * Returns the display value of the current item. * @returns {*} */ function getCurrentDisplayValue () { return getDisplayValue(ctrl.matches[ ctrl.index ]); } /** * Determines if the minimum length is met by the search text. * @returns {*} */ function isMinLengthMet () { return ($scope.searchText || '').length >= getMinLength(); } //-- actions /** * Defines a public property with a handler and a default value. * @param key * @param handler * @param value */ function defineProperty (key, handler, value) { Object.defineProperty(ctrl, key, { get: function () { return value; }, set: function (newValue) { var oldValue = value; value = newValue; handler(newValue, oldValue); } }); } /** * Selects the item at the given index. * @param index */ function select (index) { //-- force form to update state for validation $mdUtil.nextTick(function () { getDisplayValue(ctrl.matches[ index ]).then(function (val) { var ngModel = elements.$.input.controller('ngModel'); ngModel.$setViewValue(val); ngModel.$render(); }).finally(function () { $scope.selectedItem = ctrl.matches[ index ]; setLoading(false); }); }, false); } /** * Clears the searchText value and selected item. */ function clearValue () { clearSelectedItem(); clearSearchText(); } /** * Clears the selected item */ function clearSelectedItem () { // Reset our variables ctrl.index = 0; ctrl.matches = []; } /** * Clears the searchText value */ function clearSearchText () { // Set the loading to true so we don't see flashes of content. // The flashing will only occur when an async request is running. // So the loading process will stop when the results had been retrieved. setLoading(true); $scope.searchText = ''; // Normally, triggering the change / input event is unnecessary, because the browser detects it properly. // But some browsers are not detecting it properly, which means that we have to trigger the event. // Using the `input` is not working properly, because for example IE11 is not supporting the `input` event. // The `change` event is a good alternative and is supported by all supported browsers. var eventObj = document.createEvent('CustomEvent'); eventObj.initCustomEvent('change', true, true, { value: '' }); elements.input.dispatchEvent(eventObj); // For some reason, firing the above event resets the value of $scope.searchText if // $scope.searchText has a space character at the end, so we blank it one more time and then // focus. elements.input.blur(); $scope.searchText = ''; elements.input.focus(); } /** * Fetches the results for the provided search text. * @param searchText */ function fetchResults (searchText) { var items = $scope.$parent.$eval(itemExpr), term = searchText.toLowerCase(), isList = angular.isArray(items), isPromise = !!items.then; // Every promise should contain a `then` property if (isList) onResultsRetrieved(items); else if (isPromise) handleAsyncResults(items); function handleAsyncResults(items) { if ( !items ) return; items = $q.when(items); fetchesInProgress++; setLoading(true); $mdUtil.nextTick(function () { items .then(onResultsRetrieved) .finally(function(){ if (--fetchesInProgress === 0) { setLoading(false); } }); },true, $scope); } function onResultsRetrieved(matches) { cache[term] = matches; // Just cache the results if the request is now outdated. // The request becomes outdated, when the new searchText has changed during the result fetching. if ((searchText || '') !== ($scope.searchText || '')) { return; } handleResults(matches); } } /** * Reports given message types to supported screenreaders. * @param {boolean} isPolite Whether the announcement should be polite. * @param {!number} types Message flags to be reported to the screenreader. */ function reportMessages(isPolite, types) { var politeness = isPolite ? 'polite' : 'assertive'; var messages = []; if (types & ReportType.Selected && ctrl.index !== -1) { messages.push(getCurrentDisplayValue()); } if (types & ReportType.Count) { messages.push($q.resolve(getCountMessage())); } $q.all(messages).then(function(data) { $mdLiveAnnouncer.announce(data.join(' '), politeness); }); } /** * Returns the ARIA message for how many results match the current query. * @returns {*} */ function getCountMessage () { switch (ctrl.matches.length) { case 0: return 'There are no matches available.'; case 1: return 'There is 1 match available.'; default: return 'There are ' + ctrl.matches.length + ' matches available.'; } } /** * Makes sure that the focused element is within view. */ function updateScroll () { if (!elements.li[0]) return; var height = elements.li[0].offsetHeight, top = height * ctrl.index, bot = top + height, hgt = elements.scroller.clientHeight, scrollTop = elements.scroller.scrollTop; if (top < scrollTop) { scrollTo(top); } else if (bot > scrollTop + hgt) { scrollTo(bot - hgt); } } function isPromiseFetching() { return fetchesInProgress !== 0; } function scrollTo (offset) { elements.$.scrollContainer.controller('mdVirtualRepeatContainer').scrollTo(offset); } function notFoundVisible () { var textLength = (ctrl.scope.searchText || '').length; return ctrl.hasNotFound && !hasMatches() && (!ctrl.loading || isPromiseFetching()) && textLength >= getMinLength() && (hasFocus || noBlur) && !hasSelection(); } /** * Starts the query to gather the results for the current searchText. Attempts to return cached * results first, then forwards the process to `fetchResults` if necessary. */ function handleQuery () { var searchText = $scope.searchText || ''; var term = searchText.toLowerCase(); // If caching is enabled and the current searchText is stored in the cache if (!$scope.noCache && cache[term]) { // The results should be handled as same as a normal un-cached request does. handleResults(cache[term]); } else { fetchResults(searchText); } ctrl.hidden = shouldHide(); } /** * Handles the retrieved results by showing them in the autocompletes dropdown. * @param results Retrieved results */ function handleResults(results) { ctrl.matches = results; ctrl.hidden = shouldHide(); // If loading is in progress, then we'll end the progress. This is needed for example, // when the `clear` button was clicked, because there we always show the loading process, to prevent flashing. if (ctrl.loading) setLoading(false); if ($scope.selectOnMatch) selectItemOnMatch(); positionDropdown(); reportMessages(true, ReportType.Count); } /** * If there is only one matching item and the search text matches its display value exactly, * automatically select that item. Note: This function is only called if the user uses the * `md-select-on-match` flag. */ function selectItemOnMatch () { var searchText = $scope.searchText, matches = ctrl.matches, item = matches[ 0 ]; if (matches.length === 1) getDisplayValue(item).then(function (displayValue) { var isMatching = searchText == displayValue; if ($scope.matchInsensitive && !isMatching) { isMatching = searchText.toLowerCase() == displayValue.toLowerCase(); } if (isMatching) select(0); }); } /** * Evaluates an attribute expression against the parent scope. * @param {String} attr Name of the attribute to be evaluated. * @param {Object?} locals Properties to be injected into the evaluation context. */ function evalAttr(attr, locals) { if ($attrs[attr]) { $scope.$parent.$eval($attrs[attr], locals || {}); } } } MdAutocomplete['$inject'] = ["$$mdSvgRegistry"];angular .module('material.components.autocomplete') .directive('mdAutocomplete', MdAutocomplete); /** * @ngdoc directive * @name mdAutocomplete * @module material.components.autocomplete * * @description * `` is a special input component with a drop-down of all possible matches to a * custom query. This component allows you to provide real-time suggestions as the user types * in the input area. * * To start, you will need to specify the required parameters and provide a template for your * results. The content inside `md-autocomplete` will be treated as a template. * * In more complex cases, you may want to include other content such as a message to display when * no matches were found. You can do this by wrapping your template in `md-item-template` and * adding a tag for `md-not-found`. An example of this is shown below. * * To reset the displayed value you must clear both values for `md-search-text` and `md-selected-item`. * * ### Validation * * You can use `ng-messages` to include validation the same way that you would normally validate; * however, if you want to replicate a standard input with a floating label, you will have to * do the following: * * - Make sure that your template is wrapped in `md-item-template` * - Add your `ng-messages` code inside of `md-autocomplete` * - Add your validation properties to `md-autocomplete` (ie. `required`) * - Add a `name` to `md-autocomplete` (to be used on the generated `input`) * * There is an example below of how this should look. * * ### Snapping Drop-Down * * You can cause the autocomplete drop-down to snap to an ancestor element by applying the * `md-autocomplete-snap` attribute to that element. You can also snap to the width of * the `md-autocomplete-snap` element by setting the attribute's value to `width` * (ie. `md-autocomplete-snap="width"`). * * ### Notes * * **Autocomplete Dropdown Items Rendering** * * The `md-autocomplete` uses the the VirtualRepeat * directive for displaying the results inside of the dropdown.
* * > When encountering issues regarding the item template please take a look at the * VirtualRepeatContainer documentation. * * **Autocomplete inside of a Virtual Repeat** * * When using the `md-autocomplete` directive inside of a * VirtualRepeatContainer the dropdown items might * not update properly, because caching of the results is enabled by default. * * The autocomplete will then show invalid dropdown items, because the VirtualRepeat only updates the * scope bindings, rather than re-creating the `md-autocomplete` and the previous cached results will be used. * * > To avoid such problems ensure that the autocomplete does not cache any results. * * * * {{ item.display }} * * * * * * @param {expression} md-items An expression in the format of `item in results` to iterate over * matches for your search.

* The `results` expression can be also a function, which returns the results synchronously * or asynchronously (per Promise) * @param {expression=} md-selected-item-change An expression to be run each time a new item is * selected * @param {expression=} md-search-text-change An expression to be run each time the search text * updates * @param {expression=} md-search-text A model to bind the search query text to * @param {object=} md-selected-item A model to bind the selected item to * @param {expression=} md-item-text An expression that will convert your object to a single string. * @param {string=} placeholder Placeholder text that will be forwarded to the input. * @param {boolean=} md-no-cache Disables the internal caching that happens in autocomplete * @param {boolean=} ng-disabled Determines whether or not to disable the input field * @param {boolean=} md-require-match When set to true, the autocomplete will add a validator, * which will evaluate to false, when no item is currently selected. * @param {number=} md-min-length Specifies the minimum length of text before autocomplete will * make suggestions * @param {number=} md-delay Specifies the amount of time (in milliseconds) to wait before looking * for results * @param {boolean=} md-clear-button Whether the clear button for the autocomplete input should show up or not. * @param {boolean=} md-autofocus If true, the autocomplete will be automatically focused when a `$mdDialog`, * `$mdBottomsheet` or `$mdSidenav`, which contains the autocomplete, is opening.

* Also the autocomplete will immediately focus the input element. * @param {boolean=} md-no-asterisk When present, asterisk will not be appended to the floating label * @param {boolean=} md-autoselect If set to true, the first item will be automatically selected * in the dropdown upon open. * @param {string=} md-menu-class This will be applied to the dropdown menu for styling * @param {string=} md-floating-label This will add a floating label to autocomplete and wrap it in * `md-input-container` * @param {string=} md-input-name The name attribute given to the input element to be used with * FormController * @param {string=} md-select-on-focus When present the inputs text will be automatically selected * on focus. * @param {string=} md-input-id An ID to be added to the input element * @param {number=} md-input-minlength The minimum length for the input's value for validation * @param {number=} md-input-maxlength The maximum length for the input's value for validation * @param {boolean=} md-select-on-match When set, autocomplete will automatically select exact * the item if the search text is an exact match.

* Exact match means that there is only one match showing up. * @param {boolean=} md-match-case-insensitive When set and using `md-select-on-match`, autocomplete * will select on case-insensitive match * @param {string=} md-escape-options Override escape key logic. Default is `blur clear`.
* Options: `blur | clear`, `none` * @param {string=} md-dropdown-items Specifies the maximum amount of items to be shown in * the dropdown.

* When the dropdown doesn't fit into the viewport, the dropdown will shrink * as less as possible. * @param {string=} md-dropdown-position Overrides the default dropdown position. Options: `top`, `bottom`. * @param {string=} ng-trim If set to false, the search text will be not trimmed automatically. * Defaults to true. * @param {string=} ng-pattern Adds the pattern validator to the ngModel of the search text. * [ngPattern Directive](https://docs.angularjs.org/api/ng/directive/ngPattern) * * @usage * ### Basic Example * * * {{item.display}} * * * * ### Example with "not found" message * * * * {{item.display}} * * * No matches found. * * * * * In this example, our code utilizes `md-item-template` and `md-not-found` to specify the * different parts that make up our component. * * ### Clear button for the input * By default, for floating label autocomplete's the clear button is not showing up * ([See specs](https://material.google.com/components/text-fields.html#text-fields-auto-complete-text-field)) * * Nevertheless, developers are able to explicitly toggle the clear button for all types of autocomplete's. * * * * * * * ### Example with validation * *
* * * {{item.display}} * *
*
This field is required
*
*
*
*
* * In this example, our code utilizes `md-item-template` and `ng-messages` to specify * input validation for the field. * * ### Asynchronous Results * The autocomplete items expression also supports promises, which will resolve with the query results. * * * function AppController($scope, $http) { * $scope.query = function(searchText) { * return $http * .get(BACKEND_URL + '/items/' + searchText) * .then(function(data) { * // Map the response object to the data object. * return data; * }); * }; * } * * * * * * {{item}} * * * * */ function MdAutocomplete ($$mdSvgRegistry) { return { controller: 'MdAutocompleteCtrl', controllerAs: '$mdAutocompleteCtrl', scope: { inputName: '@mdInputName', inputMinlength: '@mdInputMinlength', inputMaxlength: '@mdInputMaxlength', searchText: '=?mdSearchText', selectedItem: '=?mdSelectedItem', itemsExpr: '@mdItems', itemText: '&mdItemText', placeholder: '@placeholder', noCache: '=?mdNoCache', requireMatch: '=?mdRequireMatch', selectOnMatch: '=?mdSelectOnMatch', matchInsensitive: '=?mdMatchCaseInsensitive', itemChange: '&?mdSelectedItemChange', textChange: '&?mdSearchTextChange', minLength: '=?mdMinLength', delay: '=?mdDelay', autofocus: '=?mdAutofocus', floatingLabel: '@?mdFloatingLabel', autoselect: '=?mdAutoselect', menuClass: '@?mdMenuClass', inputId: '@?mdInputId', escapeOptions: '@?mdEscapeOptions', dropdownItems: '=?mdDropdownItems', dropdownPosition: '@?mdDropdownPosition', clearButton: '=?mdClearButton' }, compile: function(tElement, tAttrs) { var attributes = ['md-select-on-focus', 'md-no-asterisk', 'ng-trim', 'ng-pattern']; var input = tElement.find('input'); attributes.forEach(function(attribute) { var attrValue = tAttrs[tAttrs.$normalize(attribute)]; if (attrValue !== null) { input.attr(attribute, attrValue); } }); return function(scope, element, attrs, ctrl) { // Retrieve the state of using a md-not-found template by using our attribute, which will // be added to the element in the template function. ctrl.hasNotFound = !!element.attr('md-has-not-found'); // By default the inset autocomplete should show the clear button when not explicitly overwritten. if (!angular.isDefined(attrs.mdClearButton) && !scope.floatingLabel) { scope.clearButton = true; } } }, template: function (element, attr) { var noItemsTemplate = getNoItemsTemplate(), itemTemplate = getItemTemplate(), leftover = element.html(), tabindex = attr.tabindex; // Set our attribute for the link function above which runs later. // We will set an attribute, because otherwise the stored variables will be trashed when // removing the element is hidden while retrieving the template. For example when using ngIf. if (noItemsTemplate) element.attr('md-has-not-found', true); // Always set our tabindex of the autocomplete directive to -1, because our input // will hold the actual tabindex. element.attr('tabindex', '-1'); return '\ \ ' + getInputElement() + '\ ' + getClearButton() + '\ \ \
    \
  • \ ' + itemTemplate + '\
  • ' + noItemsTemplate + '\
\ \ '; function getItemTemplate() { var templateTag = element.find('md-item-template').detach(), html = templateTag.length ? templateTag.html() : element.html(); if (!templateTag.length) element.empty(); return '' + html + ''; } function getNoItemsTemplate() { var templateTag = element.find('md-not-found').detach(), template = templateTag.length ? templateTag.html() : ''; return template ? '
  • ' + template + '
  • ' : ''; } function getInputElement () { if (attr.mdFloatingLabel) { return '\ \ \ \
    ' + leftover + '
    \
    '; } else { return '\ '; } } function getClearButton() { return '' + ''; } } }; } MdAutocompleteItemScopeDirective['$inject'] = ["$compile", "$mdUtil"];angular .module('material.components.autocomplete') .directive('mdAutocompleteParentScope', MdAutocompleteItemScopeDirective); function MdAutocompleteItemScopeDirective($compile, $mdUtil) { return { restrict: 'AE', compile: compile, terminal: true, transclude: 'element' }; function compile(tElement, tAttr, transclude) { return function postLink(scope, element, attr) { var ctrl = scope.$mdAutocompleteCtrl; var newScope = ctrl.parent.$new(); var itemName = ctrl.itemName; // Watch for changes to our scope's variables and copy them to the new scope watchVariable('$index', '$index'); watchVariable('item', itemName); // Ensure that $digest calls on our scope trigger $digest on newScope. connectScopes(); // Link the element against newScope. transclude(newScope, function(clone) { element.after(clone); }); /** * Creates a watcher for variables that are copied from the parent scope * @param variable * @param alias */ function watchVariable(variable, alias) { newScope[alias] = scope[variable]; scope.$watch(variable, function(value) { $mdUtil.nextTick(function() { newScope[alias] = value; }); }); } /** * Creates watchers on scope and newScope that ensure that for any * $digest of scope, newScope is also $digested. */ function connectScopes() { var scopeDigesting = false; var newScopeDigesting = false; scope.$watch(function() { if (newScopeDigesting || scopeDigesting) { return; } scopeDigesting = true; scope.$$postDigest(function() { if (!newScopeDigesting) { newScope.$digest(); } scopeDigesting = newScopeDigesting = false; }); }); newScope.$watch(function() { newScopeDigesting = true; }); } }; } } MdHighlightCtrl['$inject'] = ["$scope", "$element", "$attrs"];angular .module('material.components.autocomplete') .controller('MdHighlightCtrl', MdHighlightCtrl); function MdHighlightCtrl ($scope, $element, $attrs) { this.$scope = $scope; this.$element = $element; this.$attrs = $attrs; // Cache the Regex to avoid rebuilding each time. this.regex = null; } MdHighlightCtrl.prototype.init = function(unsafeTermFn, unsafeContentFn) { this.flags = this.$attrs.mdHighlightFlags || ''; this.unregisterFn = this.$scope.$watch(function($scope) { return { term: unsafeTermFn($scope), contentText: unsafeContentFn($scope) }; }.bind(this), this.onRender.bind(this), true); this.$element.on('$destroy', this.unregisterFn); }; /** * Triggered once a new change has been recognized and the highlighted * text needs to be updated. */ MdHighlightCtrl.prototype.onRender = function(state, prevState) { var contentText = state.contentText; /* Update the regex if it's outdated, because we don't want to rebuilt it constantly. */ if (this.regex === null || state.term !== prevState.term) { this.regex = this.createRegex(state.term, this.flags); } /* If a term is available apply the regex to the content */ if (state.term) { this.applyRegex(contentText); } else { this.$element.text(contentText); } }; /** * Decomposes the specified text into different tokens (whether match or not). * Breaking down the string guarantees proper XSS protection due to the native browser * escaping of unsafe text. */ MdHighlightCtrl.prototype.applyRegex = function(text) { var tokens = this.resolveTokens(text); this.$element.empty(); tokens.forEach(function (token) { if (token.isMatch) { var tokenEl = angular.element('').text(token.text); this.$element.append(tokenEl); } else { this.$element.append(document.createTextNode(token)); } }.bind(this)); }; /** * Decomposes the specified text into different tokens by running the regex against the text. */ MdHighlightCtrl.prototype.resolveTokens = function(string) { var tokens = []; var lastIndex = 0; // Use replace here, because it supports global and single regular expressions at same time. string.replace(this.regex, function(match, index) { appendToken(lastIndex, index); tokens.push({ text: match, isMatch: true }); lastIndex = index + match.length; }); // Append the missing text as a token. appendToken(lastIndex); return tokens; function appendToken(from, to) { var targetText = string.slice(from, to); targetText && tokens.push(targetText); } }; /** Creates a regex for the specified text with the given flags. */ MdHighlightCtrl.prototype.createRegex = function(term, flags) { var startFlag = '', endFlag = ''; var regexTerm = this.sanitizeRegex(term); if (flags.indexOf('^') >= 0) startFlag = '^'; if (flags.indexOf('$') >= 0) endFlag = '$'; return new RegExp(startFlag + regexTerm + endFlag, flags.replace(/[$\^]/g, '')); }; /** Sanitizes a regex by removing all common RegExp identifiers */ MdHighlightCtrl.prototype.sanitizeRegex = function(term) { return term && term.toString().replace(/[\\\^\$\*\+\?\.\(\)\|\{}\[\]]/g, '\\$&'); }; MdHighlight['$inject'] = ["$interpolate", "$parse"];angular .module('material.components.autocomplete') .directive('mdHighlightText', MdHighlight); /** * @ngdoc directive * @name mdHighlightText * @module material.components.autocomplete * * @description * The `md-highlight-text` directive allows you to specify text that should be highlighted within * an element. Highlighted text will be wrapped in `` which can * be styled through CSS. Please note that child elements may not be used with this directive. * * @param {string} md-highlight-text A model to be searched for * @param {string=} md-highlight-flags A list of flags (loosely based on JavaScript RexExp flags). * #### **Supported flags**: * - `g`: Find all matches within the provided text * - `i`: Ignore case when searching for matches * - `$`: Only match if the text ends with the search term * - `^`: Only match if the text begins with the search term * * @usage * * *
      *
    • * {{result.text}} *
    • *
    *
    */ function MdHighlight ($interpolate, $parse) { return { terminal: true, controller: 'MdHighlightCtrl', compile: function mdHighlightCompile(tElement, tAttr) { var termExpr = $parse(tAttr.mdHighlightText); var unsafeContentExpr = $interpolate(tElement.html()); return function mdHighlightLink(scope, element, attr, ctrl) { ctrl.init(termExpr, unsafeContentExpr); }; } }; } })(window, window.angular);