primevue/autocomplete/autocomplete.esm.min.js

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

import{ObjectUtils as e,DomHandler as t,ConnectedOverlayScrollHandler as i,UniqueComponentId as l}from"primevue/utils";import n from"primevue/overlayeventbus";import o from"primevue/button";import s from"primevue/ripple";import{resolveComponent as a,resolveDirective as r,openBlock as u,createBlock as p,mergeProps as d,createCommentVNode as h,Fragment as c,renderList as m,createVNode as f,toDisplayString as g,Teleport as y,Transition as v,withCtx as b,renderSlot as C,withDirectives as k,createTextVNode as x}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},optionGroupLabel:null,optionGroupChildren: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:"body"},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,highlightItem:null}),watch:{suggestions(){this.searching&&(this.suggestions&&this.suggestions.length?this.showOverlay():this.hideOverlay(),this.searching=!1)}},beforeUnmount(){this.unbindOutsideClickListener(),this.unbindResizeListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.overlay=null},updated(){this.overlayVisible&&this.alignOverlay()},methods:{getOptionGroupRenderKey(t){return e.resolveFieldData(t,this.optionGroupLabel)},getOptionGroupLabel(t){return e.resolveFieldData(t,this.optionGroupLabel)},getOptionGroupChildren(t){return e.resolveFieldData(t,this.optionGroupChildren)},onOverlayEnter(){this.overlay.style.zIndex=String(t.generateZIndex()),this.alignOverlay(),this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener()},onOverlayLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),this.overlay=null},alignOverlay(){let e=this.multiple?this.$refs.multiContainer:this.$refs.input;this.overlay.style.minWidth=t.getOuterWidth(e)+"px",t.absolutePosition(this.overlay,e)},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 i(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],l=this.modelValue.filter(((e,i)=>t!==i));this.$emit("update:modelValue",l),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(t){return this.field?e.resolveFieldData(t,this.field):t},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(e){if(this.overlayVisible){let i=t.findSingle(this.overlay,"li.p-highlight");switch(e.which){case 40:if(i){let e=this.findNextItem(i);e&&(t.addClass(e,"p-highlight"),t.removeClass(i,"p-highlight"),t.scrollInView(this.overlay,e))}else i=this.overlay.firstElementChild.firstElementChild,t.hasClass(i,"p-autocomplete-item-group")&&(i=this.findNextItem(i)),i&&t.addClass(i,"p-highlight");e.preventDefault();break;case 38:if(i){let e=this.findPrevItem(i);e&&(t.addClass(e,"p-highlight"),t.removeClass(i,"p-highlight"),t.scrollInView(this.overlay,e))}e.preventDefault();break;case 13:i&&(this.selectHighlightItem(e,i),this.hideOverlay()),e.preventDefault();break;case 27:this.hideOverlay(),e.preventDefault();break;case 9:i&&this.selectHighlightItem(e,i),this.hideOverlay()}}if(this.multiple)switch(e.which){case 8:if(this.modelValue&&this.modelValue.length&&!this.$refs.input.value){let t=this.modelValue[this.modelValue.length-1],i=this.modelValue.slice(0,-1);this.$emit("update:modelValue",i),this.$emit("item-unselect",{originalEvent:e,value:t})}}},selectHighlightItem(e,i){if(this.optionGroupLabel){let t=this.suggestions[i.dataset.group];this.selectItem(e,this.getOptionGroupChildren(t)[i.dataset.index])}else this.selectItem(e,this.suggestions[t.index(i)])},findNextItem(e){let i=e.nextElementSibling;return i?t.hasClass(i,"p-autocomplete-item-group")?this.findNextItem(i):i:null},findPrevItem(e){let i=e.previousElementSibling;return i?t.hasClass(i,"p-autocomplete-item-group")?this.findPrevItem(i):i:null},onChange(t){if(this.forceSelection){let i=!1,l=t.target.value.trim();if(this.suggestions)for(let n of this.suggestions){let o=this.field?e.resolveFieldData(n,this.field):n;if(o&&l===o.trim()){i=!0,this.selectItem(t,n);break}}i||(this.$refs.input.value="",this.inputTextValue="",this.$emit("clear"),this.$emit("update:modelValue",null))}},isSelected(t){let i=!1;if(this.modelValue&&this.modelValue.length)for(let l=0;l<this.modelValue.length;l++)if(e.equals(this.modelValue[l],t)){i=!0;break}return i},overlayRef(e){this.overlay=e},onOverlayClick(e){n.emit("overlay-click",{originalEvent:e,target:this.$el})}},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 t=e.resolveFieldData(this.modelValue,this.field);return null!=t?t:this.modelValue}return this.modelValue}return""},listId:()=>l()+"_list"},components:{Button:o},directives:{ripple:s}};const V={class:"p-autocomplete-token-label"},L={class:"p-autocomplete-input-token"},I={key:2,class:"p-autocomplete-loader pi pi-spinner pi-spin"},$={class:"p-autocomplete-item-group"};!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===i&&l.firstChild?l.insertBefore(n,l.firstChild):l.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.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,l,n,o){const s=a("Button"),w=r("ripple");return u(),p("span",{ref:"container",class:o.containerClass,"aria-haspopup":"listbox","aria-owns":o.listId,"aria-expanded":n.overlayVisible,style:i.style},[i.multiple?h("",!0):(u(),p("input",d({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?(u(),p("ul",{key:1,ref:"multiContainer",class:o.multiContainerClass,onClick:t[11]||(t[11]=(...e)=>o.onMultiContainerClick&&o.onMultiContainerClick(...e))},[(u(!0),p(c,null,m(i.modelValue,((e,t)=>(u(),p("li",{key:t,class:"p-autocomplete-token"},[f("span",V,g(o.getItemContent(e)),1),f("span",{class:"p-autocomplete-token-icon pi pi-times-circle",onClick:e=>o.removeItem(e,t)},null,8,["onClick"])])))),128)),f("li",L,[f("input",d({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)):h("",!0),n.searching?(u(),p("i",I)):h("",!0),i.dropdown?(u(),p(s,{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"])):h("",!0),(u(),p(y,{to:i.appendTo},[f(v,{name:"p-connected-overlay",onEnter:o.onOverlayEnter,onLeave:o.onOverlayLeave},{default:b((()=>[n.overlayVisible?(u(),p("div",{key:0,ref:o.overlayRef,class:"p-autocomplete-panel p-component",style:{"max-height":i.scrollHeight},onClick:t[12]||(t[12]=(...e)=>o.onOverlayClick&&o.onOverlayClick(...e))},[C(e.$slots,"header",{value:i.modelValue,suggestions:i.suggestions}),f("ul",{id:o.listId,class:"p-autocomplete-items",role:"listbox"},[i.optionGroupLabel?(u(!0),p(c,{key:1},m(i.suggestions,((t,i)=>(u(),p(c,{key:o.getOptionGroupRenderKey(t)},[f("li",$,[C(e.$slots,"optiongroup",{item:t,index:i},(()=>[x(g(o.getOptionGroupLabel(t)),1)]))]),(u(!0),p(c,null,m(o.getOptionGroupChildren(t),((t,l)=>k((u(),p("li",{class:"p-autocomplete-item",key:l,onClick:e=>o.selectItem(e,t),role:"option","data-group":i,"data-index":l},[C(e.$slots,"item",{item:t,index:l},(()=>[x(g(o.getItemContent(t)),1)]))],8,["onClick","data-group","data-index"])),[[w]]))),128))],64)))),128)):(u(!0),p(c,{key:0},m(i.suggestions,((t,i)=>k((u(),p("li",{class:"p-autocomplete-item",key:i,onClick:e=>o.selectItem(e,t),role:"option"},[C(e.$slots,"item",{item:t,index:i},(()=>[x(g(o.getItemContent(t)),1)]))],8,["onClick"])),[[w]]))),128))],8,["id"]),C(e.$slots,"footer",{value:i.modelValue,suggestions:i.suggestions})],4)):h("",!0)])),_:1},8,["onEnter","onLeave"])],8,["to"]))],14,["aria-owns","aria-expanded"])};export default w;