vue-typeahead3/dist/vue-typeahead.umd.js

A super lightweight typeahead / autocompletion component for Vue.js 3. It's written in TypeScript using Vue.js 3 Composition API.

(function(c,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(c=typeof globalThis!="undefined"?globalThis:c||self,e(c.VueTypeahead={},c.Vue))})(this,function(c,e){"use strict";var O="",K=(a,_)=>{const f=a.__vccOpts||a;for(const[u,i]of _)f[u]=i;return f};const V=a=>(e.pushScopeId("data-v-9737757a"),a=a(),e.popScopeId(),a),C={class:"typeahead-container"},N={class:"search-container"},S=["placeholder"],T={key:0,class:"results-container"},M={class:"results"},w=["onClick","onMouseover"],x={class:"category"},$={key:1},I={key:1,class:"results-container"},D=[V(()=>e.createElementVNode("ul",{class:"results"},[e.createElementVNode("li",null,"No results found!")],-1))],F=e.defineComponent({__name:"Typeahead",props:{modelValue:{},suggestions:{},placeholder:{default:"Type to search..."},searchKey:{default:"value"},categoryKey:{default:"category"},valueKey:{default:"value"},maxResults:{default:5}},emits:["update:modelValue"],setup(a,{expose:_,emit:f}){const u=a,i=f,o=e.ref(""),n=e.ref(!1),s=e.ref(-1),{valueKey:y,suggestions:L,searchKey:R,modelValue:b}=e.toRefs(u),r=e.computed(()=>{var t;return!((t=o==null?void 0:o.value)!=null&&t.length)||(n==null?void 0:n.value)?[]:L.value.filter(l=>l[R.value].toLowerCase().includes(o.value.toLowerCase()))}),h=t=>(o.value=t[y.value],n.value=!0,i("update:modelValue",t));_({select:h});const v=t=>{t<0?s.value>0&&s.value--:t>0&&s.value<r.value.length-1&&s.value++},g=()=>(o.value="",n.value=!1,s.value=-1,i("update:modelValue",void 0)),k=()=>{o.value||g()},j=()=>{const t=r.value[s.value];h(t)},B=t=>{s.value=t},z=t=>t===s.value;return e.watch(b,(t,l)=>{t!==l&&(t&&t[u.valueKey]!==(o==null?void 0:o.value)&&h(t),!t&&o.value&&t[u.valueKey]!==o.value&&k())}),e.watch(o,(t,l)=>{if(t!==l&&(!t||t.length===0))return n.value=!1,s.value=-1,i("update:modelValue",void 0)}),(t,l)=>(e.openBlock(),e.createElementBlock("div",C,[e.createElementVNode("div",N,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":l[0]||(l[0]=d=>o.value=d),type:"search",placeholder:u.placeholder,class:e.normalizeClass({"has-results":r.value.length}),onSearch:k,onKeyup:[l[1]||(l[1]=e.withKeys(d=>v(-1),["up"])),l[2]||(l[2]=e.withKeys(d=>v(1),["down"])),e.withKeys(g,["esc"]),e.withKeys(j,["enter"])]},null,42,S),[[e.vModelText,o.value]])]),r.value.length&&!n.value?(e.openBlock(),e.createElementBlock("div",T,[e.createElementVNode("ul",M,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.value,(d,m)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:m},[m<t.maxResults?(e.openBlock(),e.createElementBlock("li",{key:0,class:e.normalizeClass({focused:z(m)}),onClick:E=>h(d),onMouseover:E=>B(m),onMouseleave:l[3]||(l[3]=E=>B(-1))},[e.createElementVNode("h5",x,e.toDisplayString(d[t.categoryKey]),1),e.createTextVNode(" "+e.toDisplayString(d[e.unref(y)]),1)],42,w)):e.createCommentVNode("",!0),r.value.length===0?(e.openBlock(),e.createElementBlock("li",$,"Test")):e.createCommentVNode("",!0)],64))),128))])])):o.value&&!r.value.length&&!n.value?(e.openBlock(),e.createElementBlock("div",I,D)):e.createCommentVNode("",!0)]))}});var p=K(F,[["__scopeId","data-v-9737757a"]]);p.install=function(a){a.component(p.name,p)},c.default=p,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});