vue3-simple-typeahead - npm Package Compare versions

Comparing version 0.0.3 to 0.3.1

dist/vue3-simple-typeahead.esm.js

@@ -17,2 +17,17 @@ import { defineComponent, pushScopeId, popScopeId, openBlock, createElementBlock, withDirectives, createElementVNode, withKeys, withModifiers, vModelText, Fragment, renderList, normalizeClass, createCommentVNode } from 'vue';
       required: true
+    },
+    itemProjection: {
+      type: Function,
+
+      default(item) {
+        return item;
+      }
+
+    },
+    minInputLength: {
+      type: Number,
+      default: 2,
+      validator: prop => {
+        return prop >= 0;
+      }
     }
@@ -25,3 +40,3 @@ },
     return {
-      inputId: this.id || (Math.random() * 1000).toFixed(),
+      inputId: this.id || `simple_typeahead_${(Math.random() * 1000).toFixed()}`,
       input: '',
@@ -39,3 +54,6 @@ isInputFocused: false,
 
-      this.$emit('onInput', this.input);
+      this.$emit('onInput', {
+        input: this.input,
+        items: this.filteredItems
+      });
     },
@@ -45,3 +63,6 @@
       this.isInputFocused = true;
-      this.$emit('onFocus', this.input);
+      this.$emit('onFocus', {
+        input: this.input,
+        items: this.filteredItems
+      });
     },
@@ -51,17 +72,43 @@
       this.isInputFocused = false;
-      this.$emit('onBlur', this.input);
+      this.$emit('onBlur', {
+        input: this.input,
+        items: this.filteredItems
+      });
     },
 
-    onArrowDown() {
+    onArrowDown($event) {
       if (this.isListVisible && this.currentSelectionIndex < this.filteredItems.length - 1) {
         this.currentSelectionIndex++;
       }
+
+      this.scrollSelectionIntoView();
     },
 
-    onArrowUp() {
+    onArrowUp($event) {
       if (this.isListVisible && this.currentSelectionIndex > 0) {
         this.currentSelectionIndex--;
       }
+
+      this.scrollSelectionIntoView();
     },
 
+    scrollSelectionIntoView() {
+      setTimeout(() => {
+        const list_node = document.querySelector(`#${this.wrapperId} .simple-typeahead-list`);
+        const active_node = document.querySelector(`#${this.wrapperId} .simple-typeahead-list-item.simple-typeahead-list-item-active`);
+
+        if (!(active_node.offsetTop >= list_node.scrollTop && active_node.offsetTop + active_node.offsetHeight < list_node.scrollTop + list_node.offsetHeight)) {
+          let scroll_to = 0;
+
+          if (active_node.offsetTop > list_node.scrollTop) {
+            scroll_to = active_node.offsetTop + active_node.offsetHeight - list_node.offsetHeight;
+          } else if (active_node.offsetTop < list_node.scrollTop) {
+            scroll_to = active_node.offsetTop;
+          }
+
+          list_node.scrollTo(0, scroll_to);
+        }
+      });
+    },
+
     selectCurrentSelection() {
@@ -74,3 +121,3 @@ if (this.currentSelection) {
     selectItem(item) {
-      this.input = item;
+      this.input = this.itemProjection(item);
       this.currentSelectionIndex = 0;
@@ -92,4 +139,4 @@ document.getElementById(this.inputId).blur();
   computed: {
-    searchableItems() {
-      return this.items;
+    wrapperId() {
+      return `${this.inputId}_wrapper`;
     },
@@ -99,7 +146,7 @@
       const regexp = new RegExp(this.escapeRegExp(this.input), 'i');
-      return this.searchableItems.filter(item => item.match(regexp));
+      return this.items.filter(item => this.itemProjection(item).match(regexp));
     },
 
     isListVisible() {
-      return this.isInputFocused && this.input.length > 1 && this.filteredItems.length;
+      return this.isInputFocused && this.input.length >= this.minInputLength && this.filteredItems.length;
     },
@@ -114,7 +161,5 @@
 
-pushScopeId("data-v-3e3e9518");
+pushScopeId("data-v-0c9168ec");
 
-const _hoisted_1 = {
-  class: "simple-typeahead"
-};
+const _hoisted_1 = ["id"];
 const _hoisted_2 = ["id", "placeholder"];
@@ -131,3 +176,6 @@ const _hoisted_3 = {
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1, [withDirectives(createElementVNode("input", {
+  return openBlock(), createElementBlock("div", {
+    id: _ctx.wrapperId,
+    class: "simple-typeahead"
+  }, [withDirectives(createElementVNode("input", {
     id: _ctx.inputId,
@@ -152,10 +200,10 @@ type: "text",
       class: "simple-typeahead-list-item-text",
-      "data-text": item,
-      innerHTML: _ctx.boldMatchText(item)
+      "data-text": _ctx.itemProjection(item),
+      innerHTML: _ctx.boldMatchText(_ctx.itemProjection(item))
     }, null, 8, _hoisted_5)], 42, _hoisted_4);
-  }), 128))])) : createCommentVNode("", true)]);
+  }), 128))])) : createCommentVNode("", true)], 8, _hoisted_1);
 }
 
 script.render = render;
-script.__scopeId = "data-v-3e3e9518";
+script.__scopeId = "data-v-0c9168ec";
 
@@ -162,0 +210,0 @@ // Import vue component

dist/vue3-simple-typeahead.min.js

@@ -1,1 +0,1 @@
-var Vue3SimpleTypeahead=function(e){"use strict";function t(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var i,r,o=[],u=!0,l=!1;try{for(n=n.call(e);!(u=(i=n.next()).done)&&(o.push(i.value),!t||o.length!==t);u=!0);}catch(e){l=!0,r=e}finally{try{u||null==n.return||n.return()}finally{if(l)throw r}}return o}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return n(e,t);var i=Object.prototype.toString.call(e).slice(8,-1);"Object"===i&&e.constructor&&(i=e.constructor.name);if("Map"===i||"Set"===i)return Array.from(e);if("Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i))return n(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,i=new Array(t);n<t;n++)i[n]=e[n];return i}var i=e.defineComponent({name:"Vue3SimpleTypeahead",emits:["onInput","onFocus","onBlur","selectItem"],props:{id:{type:String},placeholder:{type:String,default:""},items:{type:Array,required:!0}},created:function(){},data:function(){return{inputId:this.id||(1e3*Math.random()).toFixed(),input:"",isInputFocused:!1,currentSelectionIndex:0}},methods:{onInput:function(){this.isListVisible&&this.currentSelectionIndex>=this.filteredItems.length&&(this.currentSelectionIndex=(this.filteredItems.length||1)-1),this.$emit("onInput",this.input)},onFocus:function(){this.isInputFocused=!0,this.$emit("onFocus",this.input)},onBlur:function(){this.isInputFocused=!1,this.$emit("onBlur",this.input)},onArrowDown:function(){this.isListVisible&&this.currentSelectionIndex<this.filteredItems.length-1&&this.currentSelectionIndex++},onArrowUp:function(){this.isListVisible&&this.currentSelectionIndex>0&&this.currentSelectionIndex--},selectCurrentSelection:function(){this.currentSelection&&this.selectItem(this.currentSelection)},selectItem:function(e){this.input=e,this.currentSelectionIndex=0,document.getElementById(this.inputId).blur(),this.$emit("selectItem",e)},escapeRegExp:function(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")},boldMatchText:function(e){var t=new RegExp("(".concat(this.escapeRegExp(this.input),")"),"ig");return e.replace(t,"<strong>$1</strong>")}},computed:{searchableItems:function(){return this.items},filteredItems:function(){var e=new RegExp(this.escapeRegExp(this.input),"i");return this.searchableItems.filter((function(t){return t.match(e)}))},isListVisible:function(){return this.isInputFocused&&this.input.length>1&&this.filteredItems.length},currentSelection:function(){return this.isListVisible&&this.currentSelectionIndex<this.filteredItems.length?this.filteredItems[this.currentSelectionIndex]:void 0}}});e.pushScopeId("data-v-3e3e9518");var r={class:"simple-typeahead"},o=["id","placeholder"],u={key:0,class:"simple-typeahead-list"},l=["onClick","onMouseenter"],s=["data-text","innerHTML"];e.popScopeId(),i.render=function(t,n,i,c,a,p){return e.openBlock(),e.createElementBlock("div",r,[e.withDirectives(e.createElementVNode("input",{id:t.inputId,type:"text",placeholder:t.placeholder,"onUpdate:modelValue":n[0]||(n[0]=function(e){return t.input=e}),onInput:n[1]||(n[1]=function(){return t.onInput&&t.onInput.apply(t,arguments)}),onFocus:n[2]||(n[2]=function(){return t.onFocus&&t.onFocus.apply(t,arguments)}),onBlur:n[3]||(n[3]=function(){return t.onBlur&&t.onBlur.apply(t,arguments)}),onKeydown:[n[4]||(n[4]=e.withKeys(e.withModifiers((function(){return t.onArrowDown&&t.onArrowDown.apply(t,arguments)}),["prevent"]),["down"])),n[5]||(n[5]=e.withKeys(e.withModifiers((function(){return t.onArrowUp&&t.onArrowUp.apply(t,arguments)}),["prevent"]),["up"])),n[6]||(n[6]=e.withKeys(e.withModifiers((function(){return t.selectCurrentSelection&&t.selectCurrentSelection.apply(t,arguments)}),["prevent"]),["enter","tab"]))]},null,40,o),[[e.vModelText,t.input]]),t.isListVisible?(e.openBlock(),e.createElementBlock("div",u,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.filteredItems,(function(i,r){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["simple-typeahead-list-item",{"simple-typeahead-list-item-active":t.currentSelectionIndex==r}]),key:r,onMousedown:n[7]||(n[7]=e.withModifiers((function(){}),["prevent"])),onClick:function(e){return t.selectItem(i)},onMouseenter:function(e){return t.currentSelectionIndex=r}},[e.createElementVNode("span",{class:"simple-typeahead-list-item-text","data-text":i,innerHTML:t.boldMatchText(i)},null,8,s)],42,l)})),128))])):e.createCommentVNode("",!0)])},i.__scopeId="data-v-3e3e9518";var c=function(){var e=i;return e.install=function(t){t.component("Vue3SimpleTypeahead",e)},e}(),a=Object.freeze({__proto__:null,default:c});return Object.entries(a).forEach((function(e){var n=t(e,2),i=n[0],r=n[1];"default"!==i&&(c[i]=r)})),c}(Vue);
+var Vue3SimpleTypeahead=function(e){"use strict";function t(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var i,r,o=[],s=!0,c=!1;try{for(n=n.call(e);!(s=(i=n.next()).done)&&(o.push(i.value),!t||o.length!==t);s=!0);}catch(e){c=!0,r=e}finally{try{s||null==n.return||n.return()}finally{if(c)throw r}}return o}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return n(e,t);var i=Object.prototype.toString.call(e).slice(8,-1);"Object"===i&&e.constructor&&(i=e.constructor.name);if("Map"===i||"Set"===i)return Array.from(e);if("Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i))return n(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,i=new Array(t);n<t;n++)i[n]=e[n];return i}var i=e.defineComponent({name:"Vue3SimpleTypeahead",emits:["onInput","onFocus","onBlur","selectItem"],props:{id:{type:String},placeholder:{type:String,default:""},items:{type:Array,required:!0},itemProjection:{type:Function,default:function(e){return e}},minInputLength:{type:Number,default:2,validator:function(e){return e>=0}}},created:function(){},data:function(){return{inputId:this.id||"simple_typeahead_".concat((1e3*Math.random()).toFixed()),input:"",isInputFocused:!1,currentSelectionIndex:0}},methods:{onInput:function(){this.isListVisible&&this.currentSelectionIndex>=this.filteredItems.length&&(this.currentSelectionIndex=(this.filteredItems.length||1)-1),this.$emit("onInput",{input:this.input,items:this.filteredItems})},onFocus:function(){this.isInputFocused=!0,this.$emit("onFocus",{input:this.input,items:this.filteredItems})},onBlur:function(){this.isInputFocused=!1,this.$emit("onBlur",{input:this.input,items:this.filteredItems})},onArrowDown:function(e){this.isListVisible&&this.currentSelectionIndex<this.filteredItems.length-1&&this.currentSelectionIndex++,this.scrollSelectionIntoView()},onArrowUp:function(e){this.isListVisible&&this.currentSelectionIndex>0&&this.currentSelectionIndex--,this.scrollSelectionIntoView()},scrollSelectionIntoView:function(){var e=this;setTimeout((function(){var t=document.querySelector("#".concat(e.wrapperId," .simple-typeahead-list")),n=document.querySelector("#".concat(e.wrapperId," .simple-typeahead-list-item.simple-typeahead-list-item-active"));if(!(n.offsetTop>=t.scrollTop&&n.offsetTop+n.offsetHeight<t.scrollTop+t.offsetHeight)){var i=0;n.offsetTop>t.scrollTop?i=n.offsetTop+n.offsetHeight-t.offsetHeight:n.offsetTop<t.scrollTop&&(i=n.offsetTop),t.scrollTo(0,i)}}))},selectCurrentSelection:function(){this.currentSelection&&this.selectItem(this.currentSelection)},selectItem:function(e){this.input=this.itemProjection(e),this.currentSelectionIndex=0,document.getElementById(this.inputId).blur(),this.$emit("selectItem",e)},escapeRegExp:function(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")},boldMatchText:function(e){var t=new RegExp("(".concat(this.escapeRegExp(this.input),")"),"ig");return e.replace(t,"<strong>$1</strong>")}},computed:{wrapperId:function(){return"".concat(this.inputId,"_wrapper")},filteredItems:function(){var e=this,t=new RegExp(this.escapeRegExp(this.input),"i");return this.items.filter((function(n){return e.itemProjection(n).match(t)}))},isListVisible:function(){return this.isInputFocused&&this.input.length>=this.minInputLength&&this.filteredItems.length},currentSelection:function(){return this.isListVisible&&this.currentSelectionIndex<this.filteredItems.length?this.filteredItems[this.currentSelectionIndex]:void 0}}});e.pushScopeId("data-v-0c9168ec");var r=["id"],o=["id","placeholder"],s={key:0,class:"simple-typeahead-list"},c=["onClick","onMouseenter"],l=["data-text","innerHTML"];e.popScopeId(),i.render=function(t,n,i,u,p,a){return e.openBlock(),e.createElementBlock("div",{id:t.wrapperId,class:"simple-typeahead"},[e.withDirectives(e.createElementVNode("input",{id:t.inputId,type:"text",placeholder:t.placeholder,"onUpdate:modelValue":n[0]||(n[0]=function(e){return t.input=e}),onInput:n[1]||(n[1]=function(){return t.onInput&&t.onInput.apply(t,arguments)}),onFocus:n[2]||(n[2]=function(){return t.onFocus&&t.onFocus.apply(t,arguments)}),onBlur:n[3]||(n[3]=function(){return t.onBlur&&t.onBlur.apply(t,arguments)}),onKeydown:[n[4]||(n[4]=e.withKeys(e.withModifiers((function(){return t.onArrowDown&&t.onArrowDown.apply(t,arguments)}),["prevent"]),["down"])),n[5]||(n[5]=e.withKeys(e.withModifiers((function(){return t.onArrowUp&&t.onArrowUp.apply(t,arguments)}),["prevent"]),["up"])),n[6]||(n[6]=e.withKeys(e.withModifiers((function(){return t.selectCurrentSelection&&t.selectCurrentSelection.apply(t,arguments)}),["prevent"]),["enter","tab"]))]},null,40,o),[[e.vModelText,t.input]]),t.isListVisible?(e.openBlock(),e.createElementBlock("div",s,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.filteredItems,(function(i,r){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["simple-typeahead-list-item",{"simple-typeahead-list-item-active":t.currentSelectionIndex==r}]),key:r,onMousedown:n[7]||(n[7]=e.withModifiers((function(){}),["prevent"])),onClick:function(e){return t.selectItem(i)},onMouseenter:function(e){return t.currentSelectionIndex=r}},[e.createElementVNode("span",{class:"simple-typeahead-list-item-text","data-text":t.itemProjection(i),innerHTML:t.boldMatchText(t.itemProjection(i))},null,8,l)],42,c)})),128))])):e.createCommentVNode("",!0)],8,r)},i.__scopeId="data-v-0c9168ec";var u=function(){var e=i;return e.install=function(t){t.component("Vue3SimpleTypeahead",e)},e}(),p=Object.freeze({__proto__:null,default:u});return Object.entries(p).forEach((function(e){var n=t(e,2),i=n[0],r=n[1];"default"!==i&&(u[i]=r)})),u}(Vue);

dist/vue3-simple-typeahead.ssr.js

@@ -72,2 +72,15 @@ 'use strict';var vue=require('vue');function _slicedToArray(arr, i) {
       required: true
+    },
+    itemProjection: {
+      type: Function,
+      default: function _default(item) {
+        return item;
+      }
+    },
+    minInputLength: {
+      type: Number,
+      default: 2,
+      validator: function validator(prop) {
+        return prop >= 0;
+      }
     }
@@ -78,3 +91,3 @@ },
     return {
-      inputId: this.id || (Math.random() * 1000).toFixed(),
+      inputId: this.id || "simple_typeahead_".concat((Math.random() * 1000).toFixed()),
       input: '',
@@ -91,22 +104,55 @@ isInputFocused: false,
 
-      this.$emit('onInput', this.input);
+      this.$emit('onInput', {
+        input: this.input,
+        items: this.filteredItems
+      });
     },
     onFocus: function onFocus() {
       this.isInputFocused = true;
-      this.$emit('onFocus', this.input);
+      this.$emit('onFocus', {
+        input: this.input,
+        items: this.filteredItems
+      });
     },
     onBlur: function onBlur() {
       this.isInputFocused = false;
-      this.$emit('onBlur', this.input);
+      this.$emit('onBlur', {
+        input: this.input,
+        items: this.filteredItems
+      });
     },
-    onArrowDown: function onArrowDown() {
+    onArrowDown: function onArrowDown($event) {
       if (this.isListVisible && this.currentSelectionIndex < this.filteredItems.length - 1) {
         this.currentSelectionIndex++;
       }
+
+      this.scrollSelectionIntoView();
     },
-    onArrowUp: function onArrowUp() {
+    onArrowUp: function onArrowUp($event) {
       if (this.isListVisible && this.currentSelectionIndex > 0) {
         this.currentSelectionIndex--;
       }
+
+      this.scrollSelectionIntoView();
     },
+    scrollSelectionIntoView: function scrollSelectionIntoView() {
+      var _this = this;
+
+      setTimeout(function () {
+        var list_node = document.querySelector("#".concat(_this.wrapperId, " .simple-typeahead-list"));
+        var active_node = document.querySelector("#".concat(_this.wrapperId, " .simple-typeahead-list-item.simple-typeahead-list-item-active"));
+
+        if (!(active_node.offsetTop >= list_node.scrollTop && active_node.offsetTop + active_node.offsetHeight < list_node.scrollTop + list_node.offsetHeight)) {
+          var scroll_to = 0;
+
+          if (active_node.offsetTop > list_node.scrollTop) {
+            scroll_to = active_node.offsetTop + active_node.offsetHeight - list_node.offsetHeight;
+          } else if (active_node.offsetTop < list_node.scrollTop) {
+            scroll_to = active_node.offsetTop;
+          }
+
+          list_node.scrollTo(0, scroll_to);
+        }
+      });
+    },
     selectCurrentSelection: function selectCurrentSelection() {
@@ -118,3 +164,3 @@ if (this.currentSelection) {
     selectItem: function selectItem(item) {
-      this.input = item;
+      this.input = this.itemProjection(item);
       this.currentSelectionIndex = 0;
@@ -133,13 +179,15 @@ document.getElementById(this.inputId).blur();
   computed: {
-    searchableItems: function searchableItems() {
-      return this.items;
+    wrapperId: function wrapperId() {
+      return "".concat(this.inputId, "_wrapper");
     },
     filteredItems: function filteredItems() {
+      var _this2 = this;
+
       var regexp = new RegExp(this.escapeRegExp(this.input), 'i');
-      return this.searchableItems.filter(function (item) {
-        return item.match(regexp);
+      return this.items.filter(function (item) {
+        return _this2.itemProjection(item).match(regexp);
       });
     },
     isListVisible: function isListVisible() {
-      return this.isInputFocused && this.input.length > 1 && this.filteredItems.length;
+      return this.isInputFocused && this.input.length >= this.minInputLength && this.filteredItems.length;
     },
@@ -150,7 +198,5 @@ currentSelection: function currentSelection() {
   }
-});vue.pushScopeId("data-v-3e3e9518");
+});vue.pushScopeId("data-v-0c9168ec");
 
-var _hoisted_1 = {
-  class: "simple-typeahead"
-};
+var _hoisted_1 = ["id"];
 var _hoisted_2 = ["id", "placeholder"];
@@ -167,3 +213,6 @@ var _hoisted_3 = {
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [vue.withDirectives(vue.createElementVNode("input", {
+  return vue.openBlock(), vue.createElementBlock("div", {
+    id: _ctx.wrapperId,
+    class: "simple-typeahead"
+  }, [vue.withDirectives(vue.createElementVNode("input", {
     id: _ctx.inputId,
@@ -206,8 +255,8 @@ type: "text",
       class: "simple-typeahead-list-item-text",
-      "data-text": item,
-      innerHTML: _ctx.boldMatchText(item)
+      "data-text": _ctx.itemProjection(item),
+      innerHTML: _ctx.boldMatchText(_ctx.itemProjection(item))
     }, null, 8, _hoisted_5)], 42, _hoisted_4);
-  }), 128))])) : vue.createCommentVNode("", true)]);
+  }), 128))])) : vue.createCommentVNode("", true)], 8, _hoisted_1);
 }script.render = render;
-script.__scopeId = "data-v-3e3e9518";// Import vue component
+script.__scopeId = "data-v-0c9168ec";// Import vue component
 // IIFE injects install function into component, allowing component
@@ -214,0 +263,0 @@ // to be registered via Vue.use() as well as Vue.component(),

package.json

 {
   "name": "vue3-simple-typeahead",
-  "version": "0.0.3",
+  "version": "0.3.1",
   "description": "Simple Vue3 typeahead component that show a suggested list of elements while the user types in.",
@@ -16,2 +16,16 @@ "author": "frikinside <[e-mail]> (http://frikinside.net/)",
   },
+  "keywords": [
+    "autocomplete",
+    "autosuggest",
+    "typeahead",
+    "select",
+    "search",
+    "accessibility",
+    "a11y",
+    "WAI-ARIA",
+    "vue",
+    "vue3",
+    "vue3js",
+    "vuejs3"
+  ],
   "main": "dist/vue3-simple-typeahead.ssr.js",
@@ -18,0 +32,0 @@ "browser": "dist/vue3-simple-typeahead.esm.js",

README.md

@@ -6,4 +6,6 @@ # vue3-simple-typeahead
 
-The component includes it's own input and when the user types on it (at least two characters) the suggested options appear.
+The component includes it's own input and when the user types on it the suggested options appear.
 
+![Demo](vue3-simple-typeahead.gif)
+
 ## Demo
@@ -29,3 +31,3 @@
 
-## Usage
+## Add installed component to your app
 
@@ -61,4 +63,6 @@ Import the vue3-simple-typeahead component and register it globally in your Vue app. Import the CSS as well if you wish to use the default styling.
 
-Then, use the component in your app.
+## Usage
 
+Use the component on your own app components
+
 ```html
@@ -69,6 +73,8 @@ <vue3-simple-typeahead
 	:items="['One','Two','Three',...]"
+	:minInputLength="1"
+	:itemProjection="itemProjectionFunction"
 	@selectItem="selectItemEventHandler"
 	@onInput="onInputEventHandler"
-	@onFocus="onInputEventHandler"
-	@onBlur="onInputEventHandler"
+	@onFocus="onFocusEventHandler"
+	@onBlur="onBlurEventHandler"
 >
@@ -78,17 +84,39 @@ </vue3-simple-typeahead>
 
+### User interaction
+
+When the user types on the typeahead input and the minimum input length is meeted a suggestion list appears below the input with the items that match the user input.
+You can continue to type further to filter the selection, but you could use keyboard or mouse input to make your selection.abnf
+
+When the suggestion list show up, you can continue to type to filter the selection or you use the `Arrow Up`<kbd>↑</kbd> or `Arrow Down`<kbd>↓</kbd> keys to navigate the list of suggestions. When you have selected the desired element press <kbd>Enter</kbd> or <kbd>TAB</kbd> to select the current element.
+
+| Control          | Effect                                                             |
+| :--------------- | :----------------------------------------------------------------- |
+| <kbd>↑</kbd>     | Navigate up on the suggestion list, selecting the previous element |
+| <kbd>↓</kbd>     | Navigate down on the suggestion list, selecting the next element   |
+| <kbd>Enter</kbd> | Choose the current element selection                               |
+| <kbd>TAB</kbd>   | Choose the current element selection                               |
+
+You can use the mouse instead, simply hover you cursor over the desire element and click on it.
+
+![User controls](vue3-simple-typeahead.gif)
+
 ### Props
 
-| Prop                          | Type             | Default              | Description                                                               |
-| :---------------------------- | :--------------- | :------------------- | :------------------------------------------------------------------------ |
-| [`id`](#id)                   | String           | Random id generation | The id for the input control. Can be useful to link with a `label for=""` |
-| [`placeholder`](#placeholder) | String           | `''`                 | Placeholder text for the input                                            |
-| [`items`](#items)             | Array (Required) |                      | List of strings with the elements for suggestions                         |
+| Prop                                | Type             | Default                    | Description                                                                             |
+| :---------------------------------- | :--------------- | :------------------------- | :-------------------------------------------------------------------------------------- |
+| [`id`](#id)                         | String           | Random id generation       | The id for the input control. Can be useful to link with a `label for=""`               |
+| [`placeholder`](#placeholder)       | String           | `''`                       | Placeholder text for the input                                                          |
+| [`items`](#items)                   | Array (Required) |                            | List of objects or strings with the elements for suggestions                            |
+| [`minInputLength`](#minInputLength) | Number           | 2                          | Minimum input length for the suggestion length to appear, the prop value has to be >= 0 |
+| [`itemProjection`](#itemProjection) | Function: String | `(item) => {return item;}` | Projection function to map the items to a string value for search and display           |
 
+_Remember you can always use lower-kebap-case for camelCase props like `min-input-length`_
+
 ### Events
 
-| Event                       | Signature                        | Description                                                                                         |
-| :-------------------------- | :------------------------------- | :-------------------------------------------------------------------------------------------------- |
-| [`selectItem`](#selectItem) | `function (item: String): void`  | Emitted when the user selects an item from the suggestion list                                      |
-| [`onInput`](#onInput)       | `function (input: String): void` | Emitted when the user types anything                                                                |
-| [`onFocus`](#onFocus)       | `function (input: String): void` | Emitted when the input control get the focus                                                        |
-| [`onBlur`](#onBlur)         | `function (input: String): void` | Emitted when the input control lost the focus [When the user select an item, the focus is lost too] |
+| Event                       | Signature                                                        | Description                                                                                         |
+| :-------------------------- | :--------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------- |
+| [`selectItem`](#selectItem) | `function (item: String): void`                                  | Emitted when the user selects an item from the suggestion list                                      |
+| [`onInput`](#onInput)       | `function (event: Object { input: String, items: Array }): void` | Emitted when the user types anything                                                                |
+| [`onFocus`](#onFocus)       | `function (event: Object { input: String, items: Array }): void` | Emitted when the input control get the focus                                                        |
+| [`onBlur`](#onBlur)         | `function (event: Object { input: String, items: Array }): void` | Emitted when the input control lost the focus [When the user select an item, the focus is lost too] |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37154

increased by26.78%

Lines of code

459

increased by21.75%

Number of lines in readme file

118

increased by31.11%

No dependency changes