Added the ability to select items using arrow keys

src/components/VueBootstrapTypeahead.vue

@@ -16,6 +16,7 @@
         @focus="isFocused = true"
         @blur="handleBlur"
         @input="handleInput($event.target.value)"
+        @keydown="handleKeyDown"
         autocomplete="off"
       />
       <div v-if="$slots.append || append" class="input-group-append">
@@ -35,6 +36,7 @@
       :maxMatches="maxMatches"
       :minMatchingChars="minMatchingChars"
       @hit="handleHit"
+      @keydown="handleKeyDown"
     >
       <!-- pass down all scoped slots -->
       <template v-for="(slot, slotName) in $scopedSlots" :slot="slotName" slot-scope="{ data, htmlText }">
@@ -158,6 +160,19 @@ export default {
       if (typeof this.value !== 'undefined') {
         this.$emit('input', newValue)
       }
+    },
+
+    handleKeyDown(evt) {
+      if (! this.isFocused || this.data.length < 1) return
+
+      switch (evt.code) {
+        case 'ArrowUp':
+        case 'ArrowDown':
+        case 'Enter':
+          evt.preventDefault()
+          this.$emit('selectionKeyPressed', evt)
+          break
+      }
     }
   },
 

src/components/VueBootstrapTypeaheadList.vue

@@ -7,6 +7,7 @@
       :background-variant="backgroundVariant"
       :text-variant="textVariant"
       @click.native="handleHit(item, $event)"
+      @keydown="$listeners.keydown"
     >
       <template v-if="$scopedSlots.suggestion" slot="suggestion" slot-scope="{ data, htmlText }">
         <slot name="suggestion" v-bind="{ data, htmlText }" />
@@ -96,8 +97,57 @@ export default {
         }).slice(0, this.maxMatches)
     }
   },
+  mounted() {
+    this.$parent.$on('selectionKeyPressed', this.handleSelectionKey.bind(this))
+  },
 
   methods: {
+    handleSelectionKey(evt) {
+      if (this.data.length < 1) return
+
+      let active = this.findActiveItemIndex()
+      let ch = this.$children
+      switch (evt.code) {
+        case 'ArrowUp':
+          this.setActiveItem((active > 0) ? (active - 1) : (ch.length - 1))
+          break
+        case 'ArrowDown':
+          this.setActiveItem((active + 1) % ch.length)
+          break
+        case 'Enter':
+          this.$emit('hit', this.findActiveItem())
+          break
+      }
+    },
+
+    findActiveItem() {
+      let idx = this.findActiveItemIndex()
+      return (idx < 0) ? null : this.matchedItems[idx]
+    },
+
+    findActiveItemIndex() {
+      let ch = this.$children
+      for (let i = 0; i < ch.length; i++) {
+        let item = ch[i]
+        if (item.active) {
+          return i
+        }
+      }
+      return -1
+    },
+
+    setActiveItem(idx) {
+      this.$children.forEach((item, i) => {
+        if (i === idx) {
+          item.active = true
+          item.$el.scrollIntoView(false)
+        }
+        else {
+          item.active = false
+        }
+      })
+    },
+
     handleHit(item, evt) {
       this.$emit('hit', item)
       evt.preventDefault()

src/components/VueBootstrapTypeaheadListItem.vue

@@ -5,6 +5,7 @@
     :class="textClasses"
     @mouseover="active = true"
     @mouseout="active = false"
+    @keydown="$listeners.keydown"
   >
     <slot name="suggestion" v-bind="{ data: data, htmlText: htmlText }">
       <span v-html="htmlText"></span>

src/examples/ArrowKeys.vue

@@ -0,0 +1,66 @@
+<template>
+  <div id="wrapper">
+    <h1>Arrow Keys Example</h1>
+    <div>
+      <p class="lead">
+        Selected Country: <strong>{{query}}</strong>
+      </p>
+      <vue-bootstrap-typeahead
+        v-model="query"
+        :data="countries"
+        placeholder="Enter a country"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import VueBootstrapTypeahead from '@/components/VueBootstrapTypeahead';
+
+  export default {
+    components: {
+      VueBootstrapTypeahead
+    },
+    data() {
+      return {
+        query: '',
+        countries: [
+          'Argentina',
+          'Armenia',
+          'Bahamas',
+          'Bahrain',
+          'Bangladesh',
+          'Barbados',
+          'Belarus',
+          'Belize',
+          'Benin',
+          'Cambodia',
+          'Cameroon',
+          'Canada',
+          'Ukraine',
+          'United Arab Emirates',
+          'United Kingdom',
+          'United States',
+          'Mauritius',
+          'Mauritania',
+          'Mexico',
+          'Monaco',
+          'Mongolia',
+          'Montenegro'
+        ]
+      }
+    },
+    methods: {
+    },
+    watch: {
+    },
+    filters: {
+      stringify(value) {
+        return JSON.stringify(value, null, 2)
+      }
+    },
+  }
+</script>
+
+<style>
+</style>

src/router.js

@@ -29,6 +29,10 @@ export default new Router({
           path: 'basic-example',
           component: () => import(/* webpackChunkName: "examples" */ './examples/BasicExample.vue')
         },
+        {
+          path: 'arrow-keys',
+          component: () => import(/* webpackChunkName: "examples" */ './examples/ArrowKeys.vue')
+        },
         {
           path: 'working-with-apis',
           component: () => import(/* webpackChunkName: "examples" */ './examples/WorkingWithAPIs.vue')

src/views/Examples.vue

@@ -28,6 +28,10 @@ export default {
           name: 'Basic Example',
           link: '/examples/basic-example'
         },
+        {
+          name: 'Arrow Keys Selection',
+          link: '/examples/arrow-keys'
+        },
         {
           name: 'Working With API\'s',
           link: '/examples/working-with-apis'