primevue/autocomplete/autocomplete.esm.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue)

import{DomHandler as e,ConnectedOverlayScrollHandler as t,ObjectUtils as i,UniqueComponentId as n}from"primevue/utils";import l from"primevue/button";import o from"primevue/ripple";import{resolveComponent as s,resolveDirective as a,openBlock as r,createBlock as u,mergeProps as p,createCommentVNode as d,Fragment as h,renderList as c,createVNode as m,toDisplayString as f,Transition as y,withCtx as v,withDirectives as g,renderSlot as b,createTextVNode as C}from"vue";var w={inheritAttrs:!1,emits:["update:modelValue","item-select","item-unselect","dropdown-click","clear","complete"],props:{modelValue:null,suggestions:{type:Array,default:null},field:{type:[String,Function],default:null},scrollHeight:{type:String,default:"200px"},dropdown:{type:Boolean,default:!1},dropdownMode:{type:String,default:"blank"},multiple:{type:Boolean,default:!1},minLength:{type:Number,default:1},delay:{type:Number,default:300},appendTo:{type:String,default:null},forceSelection:{type:Boolean,default:!1},inputClass:null,inputStyle:null,class:null,style:null},timeout:null,outsideClickListener:null,resizeListener:null,scrollHandler:null,overlay:null,data:()=>({searching:!1,focused:!1,overlayVisible:!1,inputTextValue:null}),watch:{suggestions(){this.searching&&(this.suggestions&&this.suggestions.length?this.showOverlay():this.hideOverlay(),this.searching=!1)}},beforeUnmount(){this.restoreAppend(),this.unbindOutsideClickListener(),this.unbindResizeListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.overlay=null},updated(){this.overlayVisible&&this.alignOverlay()},methods:{onOverlayEnter(){this.overlay.style.zIndex=String(e.generateZIndex()),this.appendContainer(),this.alignOverlay(),this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener()},onOverlayLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),this.overlay=null},alignOverlay(){let t=this.multiple?this.$refs.multiContainer:this.$refs.input;this.appendTo?e.absolutePosition(this.overlay,t):e.relativePosition(this.overlay,t)},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.overlayVisible&&this.overlay&&this.isOutsideClicked(e)&&this.hideOverlay()},document.addEventListener("click",this.outsideClickListener))},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new t(this.$refs.container,(()=>{this.overlayVisible&&this.hideOverlay()}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.overlayVisible&&this.hideOverlay()},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isOutsideClicked(e){return!this.overlay.contains(e.target)&&!this.isInputClicked(e)&&!this.isDropdownClicked(e)},isInputClicked(e){return this.multiple?e.target===this.$refs.multiContainer||this.$refs.multiContainer.contains(e.target):e.target===this.$refs.input},isDropdownClicked(e){return!!this.$refs.dropdownButton&&(e.target===this.$refs.dropdownButton||this.$refs.dropdownButton.$el.contains(e.target))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},selectItem(e,t){if(this.multiple){if(this.$refs.input.value="",this.inputTextValue="",!this.isSelected(t)){let e=this.modelValue?[...this.modelValue,t]:[t];this.$emit("update:modelValue",e)}}else this.$emit("update:modelValue",t);this.$emit("item-select",{originalEvent:e,value:t}),this.focus(),this.hideOverlay()},onMultiContainerClick(){this.focus()},removeItem(e,t){let i=this.modelValue[t],n=this.modelValue.filter(((e,i)=>t!==i));this.$emit("update:modelValue",n),this.$emit("item-unselect",{originalEvent:e,value:i})},onDropdownClick(e){this.focus();const t=this.$refs.input.value;"blank"===this.dropdownMode?this.search(e,"","dropdown"):"current"===this.dropdownMode&&this.search(e,t,"dropdown"),this.$emit("dropdown-click",{originalEvent:e,query:t})},getItemContent(e){return this.field?i.resolveFieldData(e,this.field):e},showOverlay(){this.overlayVisible=!0},hideOverlay(){this.overlayVisible=!1},focus(){this.$refs.input.focus()},search(e,t,i){null!=t&&("input"===i&&0===t.trim().length||(this.searching=!0,this.$emit("complete",{originalEvent:e,query:t})))},onInput(e){this.inputTextValue=e.target.value,this.timeout&&clearTimeout(this.timeout);let t=e.target.value;this.multiple||this.$emit("update:modelValue",t),0===t.length?(this.hideOverlay(),this.$emit("clear")):t.length>=this.minLength?this.timeout=setTimeout((()=>{this.search(e,t,"input")}),this.delay):this.hideOverlay()},onFocus(){this.focused=!0},onBlur(){this.focused=!1},onKeyDown(t){if(this.overlayVisible){let i=e.findSingle(this.overlay,"li.p-highlight");switch(t.which){case 40:if(i){let t=i.nextElementSibling;t&&(e.addClass(t,"p-highlight"),e.removeClass(i,"p-highlight"),e.scrollInView(this.overlay,t))}else e.addClass(this.overlay.firstChild.firstElementChild,"p-highlight");t.preventDefault();break;case 38:if(i){let t=i.previousElementSibling;t&&(e.addClass(t,"p-highlight"),e.removeClass(i,"p-highlight"),e.scrollInView(this.overlay,t))}t.preventDefault();break;case 13:i&&(this.selectItem(t,this.suggestions[e.index(i)]),this.hideOverlay()),t.preventDefault();break;case 27:this.hideOverlay(),t.preventDefault();break;case 9:i&&this.selectItem(t,this.suggestions[e.index(i)]),this.hideOverlay()}}if(this.multiple)switch(t.which){case 8:if(this.modelValue&&this.modelValue.length&&!this.$refs.input.value){let e=this.modelValue[this.modelValue.length-1],i=this.modelValue.slice(0,-1);this.$emit("update:modelValue",i),this.$emit("item-unselect",{originalEvent:t,value:e})}}},onChange(e){if(this.forceSelection){let t=!1,n=e.target.value.trim();if(this.suggestions)for(let l of this.suggestions){let o=this.field?i.resolveFieldData(l,this.field):l;if(o&&n===o.trim()){t=!0,this.selectItem(e,l);break}}t||(this.$refs.input.value="",this.inputTextValue="",this.$emit("clear"),this.$emit("update:modelValue",null))}},isSelected(e){let t=!1;if(this.modelValue&&this.modelValue.length)for(let n=0;n<this.modelValue.length;n++)if(i.equals(this.modelValue[n],e)){t=!0;break}return t},appendContainer(){this.appendTo&&("body"===this.appendTo?document.body.appendChild(this.overlay):document.getElementById(this.appendTo).appendChild(this.overlay))},restoreAppend(){this.overlay&&this.appendTo&&("body"===this.appendTo?document.body.removeChild(this.overlay):document.getElementById(this.appendTo).removeChild(this.overlay))},overlayRef(e){this.overlay=e}},computed:{containerClass(){return["p-autocomplete p-component p-inputwrapper",this.class,{"p-autocomplete-dd":this.dropdown,"p-autocomplete-multiple":this.multiple,"p-inputwrapper-filled":this.modelValue||this.inputTextValue&&this.inputTextValue.length,"p-inputwrapper-focus":this.focused}]},inputFieldClass(){return["p-autocomplete-input p-inputtext p-component",this.inputClass,{"p-autocomplete-dd-input":this.dropdown,"p-disabled":this.$attrs.disabled}]},multiContainerClass(){return["p-autocomplete-multiple-container p-component p-inputtext",{"p-disabled":this.$attrs.disabled,"p-focus":this.focused}]},inputValue(){if(this.modelValue){if(this.field&&"object"==typeof this.modelValue){const e=i.resolveFieldData(this.modelValue,this.field);return null!=e?e:this.modelValue}return this.modelValue}return""},listId:()=>n()+"_list"},components:{Button:l},directives:{ripple:o}};const x={class:"p-autocomplete-token-label"},k={class:"p-autocomplete-input-token"},V={key:2,class:"p-autocomplete-loader pi pi-spinner pi-spin"};!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===i&&n.firstChild?n.insertBefore(l,n.firstChild):n.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-autocomplete {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    position: relative;\n}\n.p-autocomplete-loader {\n    position: absolute;\n    top: 50%;\n    margin-top: -.5rem;\n}\n.p-autocomplete-dd .p-autocomplete-input {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    width: 1%;\n}\n.p-autocomplete-dd .p-autocomplete-input,\n.p-autocomplete-dd .p-autocomplete-multiple-container {\n     border-top-right-radius: 0;\n     border-bottom-right-radius: 0;\n}\n.p-autocomplete-dd .p-autocomplete-dropdown {\n     border-top-left-radius: 0;\n     border-bottom-left-radius: 0px;\n}\n.p-autocomplete .p-autocomplete-panel {\n    min-width: 100%;\n}\n.p-autocomplete-panel {\n    position: absolute;\n    overflow: auto;\n}\n.p-autocomplete-items {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n}\n.p-autocomplete-item {\n    cursor: pointer;\n    white-space: nowrap;\n    position: relative;\n    overflow: hidden;\n}\n.p-autocomplete-multiple-container {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    cursor: text;\n    overflow: hidden;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n}\n.p-autocomplete-token {\n    cursor: default;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-flex: 0;\n        -ms-flex: 0 0 auto;\n            flex: 0 0 auto;\n}\n.p-autocomplete-token-icon {\n    cursor: pointer;\n}\n.p-autocomplete-input-token {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n}\n.p-autocomplete-input-token input {\n    border: 0 none;\n    outline: 0 none;\n    background-color: transparent;\n    margin: 0;\n    padding: 0;\n    -webkit-box-shadow: none;\n            box-shadow: none;\n    border-radius: 0;\n    width: 100%;\n}\n.p-fluid .p-autocomplete {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-fluid .p-autocomplete-dd .p-autocomplete-input {\n    width: 1%;\n}\n"),w.render=function(e,t,i,n,l,o){const w=s("Button"),L=a("ripple");return r(),u("span",{ref:"container",class:o.containerClass,"aria-haspopup":"listbox","aria-owns":o.listId,"aria-expanded":l.overlayVisible,style:i.style},[i.multiple?d("",!0):(r(),u("input",p({key:0,ref:"input",class:o.inputFieldClass,style:i.inputStyle},e.$attrs,{value:o.inputValue,onInput:t[1]||(t[1]=(...e)=>o.onInput&&o.onInput(...e)),onFocus:t[2]||(t[2]=(...e)=>o.onFocus&&o.onFocus(...e)),onBlur:t[3]||(t[3]=(...e)=>o.onBlur&&o.onBlur(...e)),onKeydown:t[4]||(t[4]=(...e)=>o.onKeyDown&&o.onKeyDown(...e)),onChange:t[5]||(t[5]=(...e)=>o.onChange&&o.onChange(...e)),type:"text",autoComplete:"off",role:"searchbox","aria-autocomplete":"list","aria-controls":o.listId}),null,16,["value","aria-controls"])),i.multiple?(r(),u("ul",{key:1,ref:"multiContainer",class:o.multiContainerClass,onClick:t[11]||(t[11]=(...e)=>o.onMultiContainerClick&&o.onMultiContainerClick(...e))},[(r(!0),u(h,null,c(i.modelValue,((e,t)=>(r(),u("li",{key:t,class:"p-autocomplete-token"},[m("span",x,f(o.getItemContent(e)),1),m("span",{class:"p-autocomplete-token-icon pi pi-times-circle",onClick:e=>o.removeItem(e,t)},null,8,["onClick"])])))),128)),m("li",k,[m("input",p({ref:"input",type:"text",autoComplete:"off"},e.$attrs,{onInput:t[6]||(t[6]=(...e)=>o.onInput&&o.onInput(...e)),onFocus:t[7]||(t[7]=(...e)=>o.onFocus&&o.onFocus(...e)),onBlur:t[8]||(t[8]=(...e)=>o.onBlur&&o.onBlur(...e)),onKeydown:t[9]||(t[9]=(...e)=>o.onKeyDown&&o.onKeyDown(...e)),onChange:t[10]||(t[10]=(...e)=>o.onChange&&o.onChange(...e)),role:"searchbox","aria-autocomplete":"list","aria-controls":o.listId}),null,16,["aria-controls"])])],2)):d("",!0),l.searching?(r(),u("i",V)):d("",!0),i.dropdown?(r(),u(w,{key:3,ref:"dropdownButton",type:"button",icon:"pi pi-chevron-down",class:"p-autocomplete-dropdown",disabled:e.$attrs.disabled,onClick:o.onDropdownClick},null,8,["disabled","onClick"])):d("",!0),m(y,{name:"p-connected-overlay",onEnter:o.onOverlayEnter,onLeave:o.onOverlayLeave},{default:v((()=>[l.overlayVisible?(r(),u("div",{key:0,ref:o.overlayRef,class:"p-autocomplete-panel p-component",style:{"max-height":i.scrollHeight}},[m("ul",{id:o.listId,class:"p-autocomplete-items",role:"listbox"},[(r(!0),u(h,null,c(i.suggestions,((t,i)=>g((r(),u("li",{class:"p-autocomplete-item",key:i,onClick:e=>o.selectItem(e,t),role:"option"},[b(e.$slots,"item",{item:t,index:i},(()=>[C(f(o.getItemContent(t)),1)]))],8,["onClick"])),[[L]]))),128))],8,["id"])],4)):d("",!0)])),_:1},8,["onEnter","onLeave"])],14,["aria-owns","aria-expanded"])};export default w;