@trevoreyre/autocomplete-vue/dist/autocomplete.min.js

Simple autocomplete component in vanilla JS and Vue

var Autocomplete=function(e){"use strict";function t(e,t,s){return Object.defineProperty(e,"prototype",{writable:!1}),e}function s(e,t,s){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var s=e[Symbol.toPrimitive];if(void 0!==s){var n=s.call(e,t||"default");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:s,enumerable:!0,configurable:!0,writable:!0}):e[t]=s,e}var n=function(e,t){return e.matches?e.matches(t):e.msMatchesSelector?e.msMatchesSelector(t):e.webkitMatchesSelector?e.webkitMatchesSelector(t):null},i=function(e,t){return e.closest?e.closest(t):function(e,t){for(var s=e;s&&1===s.nodeType;){if(n(s,t))return s;s=s.parentNode}return null}(e,t)},o=t((function e(){var t,n=this,o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},l=o.search,r=o.autoSelect,u=void 0!==r&&r,a=o.setValue,d=void 0===a?function(){}:a,c=o.setAttribute,h=void 0===c?function(){}:c,p=o.onUpdate,f=void 0===p?function(){}:p,b=o.onSubmit,m=void 0===b?function(){}:b,v=o.onShow,g=void 0===v?function(){}:v,w=o.autocorrect,y=void 0!==w&&w,L=o.onHide,x=void 0===L?function(){}:L,R=o.onLoading,S=void 0===R?function(){}:R,I=o.onLoaded,P=void 0===I?function(){}:I,k=o.submitOnEnter,V=void 0!==k&&k;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),s(this,"value",""),s(this,"searchCounter",0),s(this,"results",[]),s(this,"selectedIndex",-1),s(this,"selectedResult",null),s(this,"destroy",(function(){n.search=null,n.setValue=null,n.setAttribute=null,n.onUpdate=null,n.onSubmit=null,n.autocorrect=null,n.onShow=null,n.onHide=null,n.onLoading=null,n.onLoaded=null})),s(this,"handleInput",(function(e){var t=e.target.value;n.updateResults(t),n.value=t})),s(this,"handleKeyDown",(function(e){var t=e.key;switch(t){case"Up":case"Down":case"ArrowUp":case"ArrowDown":var s="ArrowUp"===t||"Up"===t?n.selectedIndex-1:n.selectedIndex+1;e.preventDefault(),n.handleArrows(s);break;case"Tab":n.selectResult();break;case"Enter":var i=e.target.getAttribute("aria-activedescendant").length>0;n.selectedResult=n.results[n.selectedIndex]||n.selectedResult,n.selectResult(),n.submitOnEnter?n.selectedResult&&n.onSubmit(n.selectedResult):i?e.preventDefault():(n.selectedResult&&n.onSubmit(n.selectedResult),n.selectedResult=null);break;case"Esc":case"Escape":n.hideResults(),n.setValue();break;default:return}})),s(this,"handleFocus",(function(e){var t=e.target.value;n.updateResults(t),n.value=t})),s(this,"handleBlur",(function(){n.hideResults()})),s(this,"handleResultMouseDown",(function(e){e.preventDefault()})),s(this,"handleResultClick",(function(e){var t=e.target,s=i(t,"[data-result-index]");if(s){n.selectedIndex=parseInt(s.dataset.resultIndex,10);var o=n.results[n.selectedIndex];n.selectResult(),n.onSubmit(o)}})),s(this,"handleArrows",(function(e){var t=n.results.length;n.selectedIndex=(e%t+t)%t,n.onUpdate(n.results,n.selectedIndex)})),s(this,"selectResult",(function(){var e=n.results[n.selectedIndex];e&&n.setValue(e),n.hideResults()})),s(this,"updateResults",(function(e){var t=++n.searchCounter;n.onLoading(),n.search(e).then((function(e){t===n.searchCounter&&(n.results=e,n.onLoaded(),0!==n.results.length?(n.selectedIndex=n.autoSelect?0:-1,n.onUpdate(n.results,n.selectedIndex),n.showResults()):n.hideResults())}))})),s(this,"showResults",(function(){n.setAttribute("aria-expanded",!0),n.onShow()})),s(this,"hideResults",(function(){n.selectedIndex=-1,n.results=[],n.setAttribute("aria-expanded",!1),n.setAttribute("aria-activedescendant",""),n.onUpdate(n.results,n.selectedIndex),n.onHide()})),s(this,"checkSelectedResultVisible",(function(e){var t=e.querySelector('[data-result-index="'.concat(n.selectedIndex,'"]'));if(t){var s=e.getBoundingClientRect(),i=t.getBoundingClientRect();i.top<s.top?e.scrollTop-=s.top-i.top:i.bottom>s.bottom&&(e.scrollTop+=i.bottom-s.bottom)}})),this.search=(t=l,Boolean(t&&"function"==typeof t.then)?l:function(e){return Promise.resolve(l(e))}),this.autoSelect=u,this.setValue=d,this.setAttribute=h,this.onUpdate=f,this.onSubmit=m,this.autocorrect=y,this.onShow=g,this.onHide=x,this.onLoading=S,this.onLoaded=P,this.submitOnEnter=V})),l={name:"Autocomplete",inheritAttrs:!1,props:{search:{type:Function,required:!0},baseClass:{type:String,default:"autocomplete"},autoSelect:{type:Boolean,default:!1},getResultValue:{type:Function,default:e=>e},defaultValue:{type:String,default:""},debounceTime:{type:Number,default:0},resultListLabel:{type:String,default:void 0},submitOnEnter:{type:Boolean,default:!1}},emits:["update","submit"],data(){const t=new o({search:this.search,autoSelect:this.autoSelect,setValue:this.setValue,onUpdate:this.handleUpdate,onSubmit:this.handleSubmit,onShow:this.handleShow,onHide:this.handleHide,onLoading:this.handleLoading,onLoaded:this.handleLoaded,submitOnEnter:this.submitOnEnter});var s,n,i;return this.debounceTime>0&&(t.handleInput=(s=t.handleInput,n=this.debounceTime,function(){var e=this,t=arguments;clearTimeout(i),i=setTimeout((function(){i=null,s.apply(e,t)}),n)})),{core:t,value:this.defaultValue,resultListId:`${this.baseClass}-result-list-${e.useId()}`,results:[],selectedIndex:-1,expanded:!1,loading:!1,position:"below",resetPosition:!0}},computed:{rootProps(){return{class:this.baseClass,style:{position:"relative"},"data-expanded":this.expanded,"data-loading":this.loading,"data-position":this.position}},inputProps(){const{class:e,style:t,...s}=this.$attrs;return{class:`${this.baseClass}-input`,value:this.value,role:"combobox",autocomplete:"off",autocapitalize:"off",autocorrect:"off",spellcheck:"false","aria-autocomplete":"list","aria-haspopup":"listbox","aria-owns":this.resultListId,"aria-expanded":this.expanded?"true":"false","aria-activedescendant":this.selectedIndex>-1?this.resultProps[this.selectedIndex].id:"",...s}},inputListeners(){return{input:this.handleInput,keydown:this.core.handleKeyDown,focus:this.core.handleFocus,blur:this.core.handleBlur}},resultListProps(){const e="below"===this.position?"top":"bottom",t=function(e){if(null!=e&&e.length){var t=e.startsWith("#");return{attribute:t?"aria-labelledby":"aria-label",content:t?e.substring(1):e}}}(this.resultListLabel);return{id:this.resultListId,class:`${this.baseClass}-result-list`,role:"listbox",[t?.attribute]:t?.content,style:{position:"absolute",zIndex:1,width:"100%",visibility:this.expanded?"visible":"hidden",pointerEvents:this.expanded?"auto":"none",[e]:"100%"}}},resultListListeners(){return{mousedown:this.core.handleResultMouseDown,click:this.core.handleResultClick}},resultProps(){return this.results.map(((e,t)=>({id:`${this.baseClass}-result-${t}`,class:`${this.baseClass}-result`,"data-result-index":t,role:"option",...this.selectedIndex===t?{"aria-selected":"true"}:{}})))}},mounted(){document.body.addEventListener("click",this.handleDocumentClick)},beforeUnmount(){document.body.removeEventListener("click",this.handleDocumentClick)},updated(){var e,t,s,n;this.$refs.input&&this.$refs.resultList&&(this.resetPosition&&this.results.length>0&&(this.resetPosition=!1,this.position=(e=this.$refs.input,t=this.$refs.resultList,s=e.getBoundingClientRect(),n=t.getBoundingClientRect(),s.bottom+n.height>window.innerHeight&&window.innerHeight-s.bottom<s.top&&window.pageYOffset+s.top-n.height>0?"above":"below")),this.core.checkSelectedResultVisible(this.$refs.resultList))},methods:{setValue(e){this.value=e?this.getResultValue(e):""},handleUpdate(e,t){this.results=e,this.selectedIndex=t,this.$emit("update",e,t)},handleShow(){this.expanded=!0},handleHide(){this.expanded=!1,this.resetPosition=!0},handleLoading(){this.loading=!0},handleLoaded(){this.loading=!1},handleInput(e){this.value=e.target.value,this.core.handleInput(e)},handleSubmit(e){this.$emit("submit",e)},handleDocumentClick(e){this.$refs.root.contains(e.target)||this.core.hideResults()}}};function r(e){r.installed||(r.installed=!0,e.component("Autocomplete",l))}l.render=function(t,s,n,i,o,l){return e.openBlock(),e.createElementBlock("div",e.mergeProps({ref:"root"},{class:t.$attrs.class,...t.$attrs.style?{style:t.$attrs.style}:{}}),[e.renderSlot(t.$slots,"default",{rootProps:l.rootProps,inputProps:l.inputProps,inputListeners:l.inputListeners,resultListProps:l.resultListProps,resultListListeners:l.resultListListeners,results:o.results,resultProps:l.resultProps},(()=>[e.createElementVNode("div",e.normalizeProps(e.guardReactiveProps(l.rootProps)),[e.createElementVNode("input",e.mergeProps({ref:"input"},l.inputProps,{onInput:s[0]||(s[0]=(...e)=>l.handleInput&&l.handleInput(...e)),onKeydown:s[1]||(s[1]=(...e)=>o.core.handleKeyDown&&o.core.handleKeyDown(...e)),onFocus:s[2]||(s[2]=(...e)=>o.core.handleFocus&&o.core.handleFocus(...e)),onBlur:s[3]||(s[3]=(...e)=>o.core.handleBlur&&o.core.handleBlur(...e))}),null,16),e.createElementVNode("ul",e.mergeProps({ref:"resultList"},l.resultListProps,e.toHandlers(l.resultListListeners,!0)),[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.results,((s,i)=>e.renderSlot(t.$slots,"result",{result:s,props:l.resultProps[i]},(()=>[(e.openBlock(),e.createElementBlock("li",e.mergeProps({key:l.resultProps[i].id,ref_for:!0},l.resultProps[i]),e.toDisplayString(n.getResultValue(s)),17))])))),256))],16)],16)]))],16)},l.__file="packages/autocomplete-vue/Autocomplete.vue";var u,a={install:r};return"undefined"!=typeof window?u=window.Vue:"undefined"!=typeof global&&(u=global.Vue),u&&u.use(a),l.install=r,l}(Vue);