primeng/bundles/primeng-autocomplete.umd.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [![Build Status](https://travis-ci.org/primefaces/primeng.

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("@angular/animations"),require("primeng/inputtext"),require("primeng/button"),require("primeng/api"),require("primeng/dom"),require("primeng/utils"),require("@angular/forms")):"function"==typeof define&&define.amd?define("primeng/autocomplete",["exports","@angular/core","@angular/common","@angular/animations","primeng/inputtext","primeng/button","primeng/api","primeng/dom","primeng/utils","@angular/forms"],e):e(((t=t||self).primeng=t.primeng||{},t.primeng.autocomplete={}),t.ng.core,t.ng.common,t.ng.animations,t.primeng.inputtext,t.primeng.button,t.primeng.api,t.primeng.dom,t.primeng.utils,t.ng.forms)}(this,(function(t,e,i,n,o,l,s,a,r,u){"use strict";var p=this&&this.__decorate||function(t,e,i,n){var o,l=arguments.length,s=l<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,i,n);else for(var a=t.length-1;a>=0;a--)(o=t[a])&&(s=(l<3?o(s):l>3?o(e,i,s):o(e,i))||s);return l>3&&s&&Object.defineProperty(e,i,s),s},h=this&&this.__read||function(t,e){var i="function"==typeof Symbol&&t[Symbol.iterator];if(!i)return t;var n,o,l=i.call(t),s=[];try{for(;(void 0===e||e-- >0)&&!(n=l.next()).done;)s.push(n.value)}catch(t){o={error:t}}finally{try{n&&!n.done&&(i=l.return)&&i.call(l)}finally{if(o)throw o.error}}return s},d=this&&this.__spread||function(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(h(arguments[e]));return t},c=this&&this.__values||function(t){var e="function"==typeof Symbol&&Symbol.iterator,i=e&&t[e],n=0;if(i)return i.call(t);if(t&&"number"==typeof t.length)return{next:function(){return t&&n>=t.length&&(t=void 0),{value:t&&t[n++],done:!t}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")},m={provide:u.NG_VALUE_ACCESSOR,useExisting:e.forwardRef((function(){return v})),multi:!0},v=function(){function t(t,i,n,o){this.el=t,this.renderer=i,this.cd=n,this.differs=o,this.minLength=1,this.delay=300,this.type="text",this.autoZIndex=!0,this.baseZIndex=0,this.dropdownIcon="pi pi-caret-down",this.unique=!0,this.completeOnFocus=!1,this.completeMethod=new e.EventEmitter,this.onSelect=new e.EventEmitter,this.onUnselect=new e.EventEmitter,this.onFocus=new e.EventEmitter,this.onBlur=new e.EventEmitter,this.onDropdownClick=new e.EventEmitter,this.onClear=new e.EventEmitter,this.onKeyUp=new e.EventEmitter,this.onShow=new e.EventEmitter,this.onHide=new e.EventEmitter,this.scrollHeight="200px",this.dropdownMode="blank",this.showTransitionOptions="225ms ease-out",this.hideTransitionOptions="195ms ease-in",this.autocomplete="off",this.onModelChange=function(){},this.onModelTouched=function(){},this.overlayVisible=!1,this.focus=!1,this.inputFieldValue=null,this.differ=o.find([]).create(null),this.listId=r.UniqueComponentId()+"_list"}return Object.defineProperty(t.prototype,"suggestions",{get:function(){return this._suggestions},set:function(t){this._suggestions=t,this.handleSuggestionsChange()},enumerable:!0,configurable:!0}),t.prototype.ngAfterViewChecked=function(){var t=this;this.suggestionsUpdated&&this.overlay&&this.overlay.offsetParent&&(setTimeout((function(){t.overlay&&t.alignOverlay()}),1),this.suggestionsUpdated=!1),this.highlightOptionChanged&&(setTimeout((function(){if(t.overlay){var e=a.DomHandler.findSingle(t.overlay,"li.ui-state-highlight");e&&a.DomHandler.scrollInView(t.overlay,e)}}),1),this.highlightOptionChanged=!1)},t.prototype.handleSuggestionsChange=function(){null!=this._suggestions&&this.loading&&(this.highlightOption=null,this._suggestions.length?(this.noResults=!1,this.show(),this.suggestionsUpdated=!0,this.autoHighlight&&(this.highlightOption=this._suggestions[0])):(this.noResults=!0,this.emptyMessage?(this.show(),this.suggestionsUpdated=!0):this.hide()),this.loading=!1)},t.prototype.ngAfterContentInit=function(){var t=this;this.templates.forEach((function(e){switch(e.getType()){case"item":t.itemTemplate=e.template;break;case"selectedItem":t.selectedItemTemplate=e.template;break;default:t.itemTemplate=e.template}}))},t.prototype.writeValue=function(t){this.value=t,this.filled=this.value&&""!=this.value,this.updateInputField()},t.prototype.registerOnChange=function(t){this.onModelChange=t},t.prototype.registerOnTouched=function(t){this.onModelTouched=t},t.prototype.setDisabledState=function(t){this.disabled=t},t.prototype.onInput=function(t){var e=this;if(this.inputKeyDown||!a.DomHandler.isIE()){this.timeout&&clearTimeout(this.timeout);var i=t.target.value;this.multiple||this.forceSelection||this.onModelChange(i),0!==i.length||this.multiple||(this.hide(),this.onClear.emit(t),this.onModelChange(i)),i.length>=this.minLength?this.timeout=setTimeout((function(){e.search(t,i)}),this.delay):(this.suggestions=null,this.hide()),this.updateFilledState(),this.inputKeyDown=!1}},t.prototype.onInputClick=function(t){this.documentClickListener&&(this.inputClick=!0)},t.prototype.search=function(t,e){null!=e&&(this.loading=!0,this.completeMethod.emit({originalEvent:t,query:e}))},t.prototype.selectItem=function(t,e){void 0===e&&(e=!0),this.forceSelectionUpdateModelTimeout&&(clearTimeout(this.forceSelectionUpdateModelTimeout),this.forceSelectionUpdateModelTimeout=null),this.multiple?(this.multiInputEL.nativeElement.value="",this.value=this.value||[],this.isSelected(t)&&this.unique||(this.value=d(this.value,[t]),this.onModelChange(this.value))):(this.inputEL.nativeElement.value=this.field?r.ObjectUtils.resolveFieldData(t,this.field)||"":t,this.value=t,this.onModelChange(this.value)),this.onSelect.emit(t),this.updateFilledState(),e&&(this.itemClicked=!0,this.focusInput())},t.prototype.show=function(){if(this.multiInputEL||this.inputEL){var t=this.multiple?document.activeElement==this.multiInputEL.nativeElement:document.activeElement==this.inputEL.nativeElement;!this.overlayVisible&&t&&(this.overlayVisible=!0)}},t.prototype.onOverlayAnimationStart=function(t){switch(t.toState){case"visible":this.overlay=t.element,this.appendOverlay(),this.autoZIndex&&(this.overlay.style.zIndex=String(this.baseZIndex+ ++a.DomHandler.zindex)),this.alignOverlay(),this.bindDocumentClickListener(),this.bindDocumentResizeListener(),this.onShow.emit(t);break;case"void":this.onOverlayHide()}},t.prototype.onOverlayAnimationDone=function(t){"void"===t.toState&&(this._suggestions=null)},t.prototype.appendOverlay=function(){this.appendTo&&("body"===this.appendTo?document.body.appendChild(this.overlay):a.DomHandler.appendChild(this.overlay,this.appendTo),this.overlay.style.minWidth=a.DomHandler.getWidth(this.el.nativeElement.children[0])+"px")},t.prototype.resolveFieldData=function(t){return this.field?r.ObjectUtils.resolveFieldData(t,this.field):t},t.prototype.restoreOverlayAppend=function(){this.overlay&&this.appendTo&&this.el.nativeElement.appendChild(this.overlay)},t.prototype.alignOverlay=function(){this.appendTo?a.DomHandler.absolutePosition(this.overlay,this.multiple?this.multiContainerEL.nativeElement:this.inputEL.nativeElement):a.DomHandler.relativePosition(this.overlay,this.multiple?this.multiContainerEL.nativeElement:this.inputEL.nativeElement)},t.prototype.hide=function(){this.overlayVisible=!1},t.prototype.handleDropdownClick=function(t){this.focusInput();var e=this.multiple?this.multiInputEL.nativeElement.value:this.inputEL.nativeElement.value;"blank"===this.dropdownMode?this.search(t,""):"current"===this.dropdownMode&&this.search(t,e),this.onDropdownClick.emit({originalEvent:t,query:e})},t.prototype.focusInput=function(){this.multiple?this.multiInputEL.nativeElement.focus():this.inputEL.nativeElement.focus()},t.prototype.removeItem=function(t){var e=a.DomHandler.index(t),i=this.value[e];this.value=this.value.filter((function(t,i){return i!=e})),this.onModelChange(this.value),this.updateFilledState(),this.onUnselect.emit(i)},t.prototype.onKeydown=function(t){if(this.overlayVisible){var e=this.findOptionIndex(this.highlightOption);switch(t.which){case 40:if(-1!=e){var i=e+1;i!=this.suggestions.length&&(this.highlightOption=this.suggestions[i],this.highlightOptionChanged=!0)}else this.highlightOption=this.suggestions[0];t.preventDefault();break;case 38:if(e>0){var n=e-1;this.highlightOption=this.suggestions[n],this.highlightOptionChanged=!0}t.preventDefault();break;case 13:this.highlightOption&&(this.selectItem(this.highlightOption),this.hide()),t.preventDefault();break;case 27:this.hide(),t.preventDefault();break;case 9:this.highlightOption&&this.selectItem(this.highlightOption),this.hide()}}else 40===t.which&&this.suggestions&&this.search(t,t.target.value);if(this.multiple)switch(t.which){case 8:if(this.value&&this.value.length&&!this.multiInputEL.nativeElement.value){this.value=d(this.value);var o=this.value.pop();this.onModelChange(this.value),this.updateFilledState(),this.onUnselect.emit(o)}}this.inputKeyDown=!0},t.prototype.onKeyup=function(t){this.onKeyUp.emit(t)},t.prototype.onInputFocus=function(t){if(!this.itemClicked&&this.completeOnFocus){var e=this.multiple?this.multiInputEL.nativeElement.value:this.inputEL.nativeElement.value;this.search(t,e)}this.focus=!0,this.onFocus.emit(t),this.itemClicked=!1},t.prototype.onInputBlur=function(t){this.focus=!1,this.onModelTouched(),this.onBlur.emit(t)},t.prototype.onInputChange=function(t){var e,i,n=this;if(this.forceSelection){var o=!1,l=t.target.value.trim();if(this.suggestions){var s=function(t){var e=a.field?r.ObjectUtils.resolveFieldData(t,a.field):t;if(e&&l===e.trim())return o=!0,a.forceSelectionUpdateModelTimeout=setTimeout((function(){n.selectItem(t,!1)}),250),"break"},a=this;try{for(var u=c(this.suggestions),p=u.next();!p.done;p=u.next()){if("break"===s(p.value))break}}catch(t){e={error:t}}finally{try{p&&!p.done&&(i=u.return)&&i.call(u)}finally{if(e)throw e.error}}}o||(this.multiple?this.multiInputEL.nativeElement.value="":(this.value=null,this.inputEL.nativeElement.value=""),this.onClear.emit(t),this.onModelChange(this.value))}},t.prototype.onInputPaste=function(t){this.onKeydown(t)},t.prototype.isSelected=function(t){var e=!1;if(this.value&&this.value.length)for(var i=0;i<this.value.length;i++)if(r.ObjectUtils.equals(this.value[i],t,this.dataKey)){e=!0;break}return e},t.prototype.findOptionIndex=function(t){var e=-1;if(this.suggestions)for(var i=0;i<this.suggestions.length;i++)if(r.ObjectUtils.equals(t,this.suggestions[i])){e=i;break}return e},t.prototype.updateFilledState=function(){this.multiple?this.filled=this.value&&this.value.length||this.multiInputEL&&this.multiInputEL.nativeElement&&""!=this.multiInputEL.nativeElement.value:this.filled=this.inputFieldValue&&""!=this.inputFieldValue||this.inputEL&&this.inputEL.nativeElement&&""!=this.inputEL.nativeElement.value},t.prototype.updateInputField=function(){var t=this.value?this.field?r.ObjectUtils.resolveFieldData(this.value,this.field)||"":this.value:"";this.inputFieldValue=t,this.inputEL&&this.inputEL.nativeElement&&(this.inputEL.nativeElement.value=t),this.updateFilledState()},t.prototype.bindDocumentClickListener=function(){var t=this;this.documentClickListener||(this.documentClickListener=this.renderer.listen("document","click",(function(e){3!==e.which&&(t.inputClick||t.isDropdownClick(e)||t.hide(),t.inputClick=!1,t.cd.markForCheck())})))},t.prototype.isDropdownClick=function(t){if(this.dropdown){var e=t.target;return e===this.dropdownButton.nativeElement||e.parentNode===this.dropdownButton.nativeElement}return!1},t.prototype.unbindDocumentClickListener=function(){this.documentClickListener&&(this.documentClickListener(),this.documentClickListener=null)},t.prototype.bindDocumentResizeListener=function(){this.documentResizeListener=this.onWindowResize.bind(this),window.addEventListener("resize",this.documentResizeListener)},t.prototype.unbindDocumentResizeListener=function(){this.documentResizeListener&&(window.removeEventListener("resize",this.documentResizeListener),this.documentResizeListener=null)},t.prototype.onWindowResize=function(){this.hide()},t.prototype.onOverlayHide=function(){this.unbindDocumentClickListener(),this.unbindDocumentResizeListener(),this.overlay=null,this.onHide.emit()},t.prototype.ngOnDestroy=function(){this.forceSelectionUpdateModelTimeout&&(clearTimeout(this.forceSelectionUpdateModelTimeout),this.forceSelectionUpdateModelTimeout=null),this.restoreOverlayAppend(),this.onOverlayHide()},t.ctorParameters=function(){return[{type:e.ElementRef},{type:e.Renderer2},{type:e.ChangeDetectorRef},{type:e.IterableDiffers}]},p([e.Input()],t.prototype,"minLength",void 0),p([e.Input()],t.prototype,"delay",void 0),p([e.Input()],t.prototype,"style",void 0),p([e.Input()],t.prototype,"panelStyle",void 0),p([e.Input()],t.prototype,"styleClass",void 0),p([e.Input()],t.prototype,"panelStyleClass",void 0),p([e.Input()],t.prototype,"inputStyle",void 0),p([e.Input()],t.prototype,"inputId",void 0),p([e.Input()],t.prototype,"inputStyleClass",void 0),p([e.Input()],t.prototype,"placeholder",void 0),p([e.Input()],t.prototype,"readonly",void 0),p([e.Input()],t.prototype,"disabled",void 0),p([e.Input()],t.prototype,"maxlength",void 0),p([e.Input()],t.prototype,"name",void 0),p([e.Input()],t.prototype,"required",void 0),p([e.Input()],t.prototype,"size",void 0),p([e.Input()],t.prototype,"appendTo",void 0),p([e.Input()],t.prototype,"autoHighlight",void 0),p([e.Input()],t.prototype,"forceSelection",void 0),p([e.Input()],t.prototype,"type",void 0),p([e.Input()],t.prototype,"autoZIndex",void 0),p([e.Input()],t.prototype,"baseZIndex",void 0),p([e.Input()],t.prototype,"ariaLabel",void 0),p([e.Input()],t.prototype,"ariaLabelledBy",void 0),p([e.Input()],t.prototype,"dropdownIcon",void 0),p([e.Input()],t.prototype,"unique",void 0),p([e.Input()],t.prototype,"completeOnFocus",void 0),p([e.Output()],t.prototype,"completeMethod",void 0),p([e.Output()],t.prototype,"onSelect",void 0),p([e.Output()],t.prototype,"onUnselect",void 0),p([e.Output()],t.prototype,"onFocus",void 0),p([e.Output()],t.prototype,"onBlur",void 0),p([e.Output()],t.prototype,"onDropdownClick",void 0),p([e.Output()],t.prototype,"onClear",void 0),p([e.Output()],t.prototype,"onKeyUp",void 0),p([e.Output()],t.prototype,"onShow",void 0),p([e.Output()],t.prototype,"onHide",void 0),p([e.Input()],t.prototype,"field",void 0),p([e.Input()],t.prototype,"scrollHeight",void 0),p([e.Input()],t.prototype,"dropdown",void 0),p([e.Input()],t.prototype,"dropdownMode",void 0),p([e.Input()],t.prototype,"multiple",void 0),p([e.Input()],t.prototype,"tabindex",void 0),p([e.Input()],t.prototype,"dataKey",void 0),p([e.Input()],t.prototype,"emptyMessage",void 0),p([e.Input()],t.prototype,"showTransitionOptions",void 0),p([e.Input()],t.prototype,"hideTransitionOptions",void 0),p([e.Input()],t.prototype,"autofocus",void 0),p([e.Input()],t.prototype,"autocomplete",void 0),p([e.ViewChild("in")],t.prototype,"inputEL",void 0),p([e.ViewChild("multiIn")],t.prototype,"multiInputEL",void 0),p([e.ViewChild("multiContainer")],t.prototype,"multiContainerEL",void 0),p([e.ViewChild("ddBtn")],t.prototype,"dropdownButton",void 0),p([e.ContentChildren(s.PrimeTemplate)],t.prototype,"templates",void 0),p([e.Input()],t.prototype,"suggestions",null),t=p([e.Component({selector:"p-autoComplete",template:'\n        <span [ngClass]="{\'ui-autocomplete ui-widget\':true,\'ui-autocomplete-dd\':dropdown,\'ui-autocomplete-multiple\':multiple}" [ngStyle]="style" [class]="styleClass">\n            <input *ngIf="!multiple" #in [attr.type]="type" [attr.id]="inputId" [ngStyle]="inputStyle" [class]="inputStyleClass" [autocomplete]="autocomplete" [attr.required]="required" [attr.name]="name"\n            [ngClass]="\'ui-inputtext ui-widget ui-state-default ui-corner-all ui-autocomplete-input\'" [value]="inputFieldValue" aria-autocomplete="list" [attr.aria-controls]="listId" role="searchbox" [attr.aria-expanded]="overlayVisible" aria-haspopup="true" [attr.aria-activedescendant]="\'p-highlighted-option\'"\n            (click)="onInputClick($event)" (input)="onInput($event)" (keydown)="onKeydown($event)" (keyup)="onKeyup($event)" [attr.autofocus]="autofocus" (focus)="onInputFocus($event)" (blur)="onInputBlur($event)" (change)="onInputChange($event)" (paste)="onInputPaste($event)"\n            [attr.placeholder]="placeholder" [attr.size]="size" [attr.maxlength]="maxlength" [attr.tabindex]="tabindex" [readonly]="readonly" [disabled]="disabled" [attr.aria-label]="ariaLabel" [attr.aria-labelledby]="ariaLabelledBy" [attr.aria-required]="required"\n            ><ul *ngIf="multiple" #multiContainer class="ui-autocomplete-multiple-container ui-widget ui-inputtext ui-state-default ui-corner-all" [ngClass]="{\'ui-state-disabled\':disabled,\'ui-state-focus\':focus}" (click)="multiIn.focus()">\n                <li #token *ngFor="let val of value" class="ui-autocomplete-token ui-state-highlight ui-corner-all">\n                    <span class="ui-autocomplete-token-icon pi pi-fw pi-times" (click)="removeItem(token)" *ngIf="!disabled"></span>\n                    <span *ngIf="!selectedItemTemplate" class="ui-autocomplete-token-label">{{resolveFieldData(val)}}</span>\n                    <ng-container *ngTemplateOutlet="selectedItemTemplate; context: {$implicit: val}"></ng-container>\n                </li>\n                <li class="ui-autocomplete-input-token">\n                    <input #multiIn [attr.type]="type" [attr.id]="inputId" [disabled]="disabled" [attr.placeholder]="(value&&value.length ? null : placeholder)" [attr.tabindex]="tabindex" [attr.maxlength]="maxlength" (input)="onInput($event)"  (click)="onInputClick($event)"\n                            (keydown)="onKeydown($event)" [readonly]="readonly" (keyup)="onKeyup($event)" [attr.autofocus]="autofocus" (focus)="onInputFocus($event)" (blur)="onInputBlur($event)" (change)="onInputChange($event)" (paste)="onInputPaste($event)" [autocomplete]="autocomplete"\n                            [ngStyle]="inputStyle" [class]="inputStyleClass" [attr.aria-label]="ariaLabel" [attr.aria-labelledby]="ariaLabelledBy" [attr.aria-required]="required"\n                            aria-autocomplete="list" [attr.aria-controls]="listId" role="searchbox" [attr.aria-expanded]="overlayVisible" aria-haspopup="true" [attr.aria-activedescendant]="\'p-highlighted-option\'">\n                </li>\n            </ul>\n            <i *ngIf="loading" class="ui-autocomplete-loader pi pi-spinner pi-spin"></i><button #ddBtn type="button" pButton [icon]="dropdownIcon" class="ui-autocomplete-dropdown" [disabled]="disabled"\n                (click)="handleDropdownClick($event)" *ngIf="dropdown" [attr.tabindex]="tabindex"></button>\n            <div #panel *ngIf="overlayVisible" [ngClass]="[\'ui-autocomplete-panel ui-widget ui-widget-content ui-corner-all ui-shadow\']" [style.max-height]="scrollHeight" [ngStyle]="panelStyle" [class]="panelStyleClass"\n                [@overlayAnimation]="{value: \'visible\', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.done)="onOverlayAnimationDone($event)" >\n                <ul role="listbox" [attr.id]="listId" class="ui-autocomplete-items ui-autocomplete-list ui-widget-content ui-widget ui-corner-all ui-helper-reset">\n                    <li role="option"  *ngFor="let option of suggestions; let idx = index" [ngClass]="{\'ui-autocomplete-list-item ui-corner-all\':true,\'ui-state-highlight\':(highlightOption==option)}"\n                        (mouseenter)="highlightOption=option" (mouseleave)="highlightOption=null" [id]="highlightOption == option ? \'p-highlighted-option\':\'\'" (click)="selectItem(option)">\n                        <span *ngIf="!itemTemplate">{{resolveFieldData(option)}}</span>\n                        <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: option, index: idx}"></ng-container>\n                    </li>\n                    <li *ngIf="noResults && emptyMessage" class="ui-autocomplete-emptymessage ui-autocomplete-list-item ui-corner-all">{{emptyMessage}}</li>\n                </ul>\n            </div>\n        </span>\n    ',animations:[n.trigger("overlayAnimation",[n.state("void",n.style({transform:"translateY(5%)",opacity:0})),n.state("visible",n.style({transform:"translateY(0)",opacity:1})),n.transition("void => visible",n.animate("{{showTransitionParams}}")),n.transition("visible => void",n.animate("{{hideTransitionParams}}"))])],host:{"[class.ui-inputwrapper-filled]":"filled","[class.ui-inputwrapper-focus]":"focus && !disabled"},providers:[m],changeDetection:e.ChangeDetectionStrategy.Default})],t)}(),g=function(){function t(){}return t=p([e.NgModule({imports:[i.CommonModule,o.InputTextModule,l.ButtonModule,s.SharedModule],exports:[v,s.SharedModule],declarations:[v]})],t)}();t.AUTOCOMPLETE_VALUE_ACCESSOR=m,t.AutoComplete=v,t.AutoCompleteModule=g,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=primeng-autocomplete.umd.min.js.map