<!-- Vue component example (also supports nesting): -->
<vue-simple-suggest v-model="vModelGoesHere">
- <my-custom-input-somponent :value="initialInputValueGoesHere"></my-custom-input-somponent>
+ <my-custom-input-component :value="initialInputValueGoesHere"></my-custom-input-component>
</vue-simple-suggest>Custom input component caveats:
To work with the vue-simple-suggest your custom input component has to follow certain standard behaviours.
Custom input component must (in order to work properly):
input event.focus and blur events.value prop.Custom input component should (in order to avoid usage limitations):
focus and blur events.If vue-simple-suggest with your custom component doesn't seem to react to outside variable changes - bind both components' v-model to the same variable, like so:
<vue-simple-suggest v-model="model">
- <my-custom-input-somponent v-model="model"></my-custom-input-somponent>
+ <my-custom-input-component v-model="model"></my-custom-input-component>
</vue-simple-suggest>New in v1.9.0
vue-simple-suggest automatically injects 3 necessary ARIA attributes for the default <input> element and any custom input, as long as your custom input component contains an html <input> element.
These attributes ensure that the autocomplete can be used by users who rely on Screen Readers.
| Name | Value | Description |
|---|---|---|
| aria-autocomplete | "list" | Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup. |
| aria-controls | IDREF of suggestions list | IDREF of the popup element that lists suggested values. |
| aria-activedescendant | IDREF of hovered option | Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element. |
suggestion-itemslot (optional)
Description
Allows custom html-definitons of the suggestion items in a list. Defaults to <span>{{ displayAttribute(suggestion) }}</span>
Accepts the suggestion object and a query text as a slot-scope attribute values.
<!-- Example (book suggestions): -->
<vue-simple-suggest>
<div slot="suggestion-item" slot-scope="{ suggestion, query }">
diff --git a/docs/main.js b/docs/main.js
index 6ada302..90c2267 100644
--- a/docs/main.js
+++ b/docs/main.js
@@ -1,7 +1,7 @@
-!function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=76)}([function(t,e,n){(function(e){var n=function(t){return t&&t.Math==Math&&t};t.exports=n("object"==typeof globalThis&&globalThis)||n("object"==typeof window&&window)||n("object"==typeof self&&self)||n("object"==typeof e&&e)||function(){return this}()||Function("return this")()}).call(this,n(17))},function(t,e){t.exports=function(t){return"function"==typeof t}},function(t,e,n){var r=n(0),i=n(52),o=n(7),s=n(54),a=n(49),u=n(48),c=i("wks"),l=r.Symbol,f=u?l:l&&l.withoutSetter||s;t.exports=function(t){return o(c,t)&&(a||"string"==typeof c[t])||(a&&o(l,t)?c[t]=l[t]:c[t]=f("Symbol."+t)),c[t]}},function(t,e,n){"use strict";n.d(e,"a",(function(){return r})),n.d(e,"e",(function(){return i})),n.d(e,"b",(function(){return o})),n.d(e,"c",(function(){return s})),n.d(e,"d",(function(){return a}));const r={selectionUp:[38],selectionDown:[40],select:[13],hideList:[27],showList:[40],autocomplete:[32,13]},i={input:String,select:Object};function o(t,e){return e.split(".").reduce((t,e)=>t===Object(t)?t[e]:t,t)}function s(t,e){return a(t,e.keyCode)}function a(t,e){if(t.length<=0)return!1;const n=t=>t.some(t=>t===e);return Array.isArray(t[0])?t.some(t=>n(t)):n(t)}},function(t,e){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,e,n){var r=n(8);t.exports=function(t){if(r(t))return t;throw TypeError(String(t)+" is not an object")}},function(t,e,n){var r=n(0),i=n(1),o=function(t){return i(t)?t:void 0};t.exports=function(t,e){return arguments.length<2?o(r[t]):r[t]&&r[t][e]}},function(t,e,n){var r=n(53),i={}.hasOwnProperty;t.exports=Object.hasOwn||function(t,e){return i.call(r(t),e)}},function(t,e,n){var r=n(1);t.exports=function(t){return"object"==typeof t?null!==t:r(t)}},function(t,e,n){var r=n(4);t.exports=!r((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]}))},function(t,e,n){var r=n(1),i=n(51);t.exports=function(t){if(r(t))return t;throw TypeError(i(t)+" is not a function")}},function(t,e,n){var r=n(0),i=n(1),o=n(7),s=n(13),a=n(33),u=n(21),c=n(22),l=n(56).CONFIGURABLE,f=c.get,p=c.enforce,d=String(String).split("String");(t.exports=function(t,e,n,u){var c,f=!!u&&!!u.unsafe,h=!!u&&!!u.enumerable,v=!!u&&!!u.noTargetGet,m=u&&void 0!==u.name?u.name:e;i(n)&&("Symbol("===String(m).slice(0,7)&&(m="["+String(m).replace(/^Symbol\(([^)]*)\)/,"$1")+"]"),(!o(n,"name")||l&&n.name!==m)&&s(n,"name",m),(c=p(n)).source||(c.source=d.join("string"==typeof m?m:""))),t!==r?(f?!v&&t[e]&&(h=!0):delete t[e],h?t[e]=n:s(t,e,n)):h?t[e]=n:a(e,n)})(Function.prototype,"toString",(function(){return i(this)&&f(this).source||u(this)}))},function(t,e,n){var r=n(0),i=n(28).f,o=n(13),s=n(11),a=n(33),u=n(85),c=n(59);t.exports=function(t,e){var n,l,f,p,d,h=t.target,v=t.global,m=t.stat;if(n=v?r:m?r[h]||a(h,{}):(r[h]||{}).prototype)for(l in e){if(p=e[l],f=t.noTargetGet?(d=i(n,l))&&d.value:n[l],!c(v?l:h+(m?".":"#")+l,t.forced)&&void 0!==f){if(typeof p==typeof f)continue;u(p,f)}(t.sham||f&&f.sham)&&o(p,"sham",!0),s(n,l,p,t)}}},function(t,e,n){var r=n(9),i=n(14),o=n(18);t.exports=r?function(t,e,n){return i.f(t,e,o(1,n))}:function(t,e,n){return t[e]=n,t}},function(t,e,n){var r=n(9),i=n(55),o=n(5),s=n(46),a=Object.defineProperty;e.f=r?a:function(t,e,n){if(o(t),e=s(e),o(n),i)try{return a(t,e,n)}catch(t){}if("get"in n||"set"in n)throw TypeError("Accessors not supported");return"value"in n&&(t[e]=n.value),t}},function(t,e){t.exports=!1},function(t,e){t.exports={}},function(t,e){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(t){"object"==typeof window&&(n=window)}t.exports=n},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e,n){var r=n(81),i=n(30);t.exports=function(t){return r(i(t))}},function(t,e,n){var r=n(6);t.exports=r("navigator","userAgent")||""},function(t,e,n){var r=n(1),i=n(32),o=Function.toString;r(i.inspectSource)||(i.inspectSource=function(t){return o.call(t)}),t.exports=i.inspectSource},function(t,e,n){var r,i,o,s=n(84),a=n(0),u=n(8),c=n(13),l=n(7),f=n(32),p=n(35),d=n(36),h=a.WeakMap;if(s||f.state){var v=f.state||(f.state=new h),m=v.get,g=v.has,y=v.set;r=function(t,e){if(g.call(v,t))throw new TypeError("Object already initialized");return e.facade=t,y.call(v,t,e),e},i=function(t){return m.call(v,t)||{}},o=function(t){return g.call(v,t)}}else{var b=p("state");d[b]=!0,r=function(t,e){if(l(t,b))throw new TypeError("Object already initialized");return e.facade=t,c(t,b,e),e},i=function(t){return l(t,b)?t[b]:{}},o=function(t){return l(t,b)}}t.exports={set:r,get:i,has:o,enforce:function(t){return o(t)?i(t):r(t,{})},getterFor:function(t){return function(e){var n;if(!u(e)||(n=i(e)).type!==t)throw TypeError("Incompatible receiver, "+t+" required");return n}}}},function(t,e,n){var r,i=n(5),o=n(94),s=n(38),a=n(36),u=n(60),c=n(34),l=n(35),f=l("IE_PROTO"),p=function(){},d=function(t){return"