Add support for minMatchingChars=0

src/components/VueBootstrapTypeahead.vue

@@ -16,6 +16,10 @@
         @focus="isFocused = true"
         @blur="handleBlur"
         @input="handleInput($event.target.value)"
+        @keyup="keyUp"
+        @keyup.down="$emit('keyup.down', $event.target.value)"
+        @keyup.up="$emit('keyup.up', $event.target.value)"
+        @keyup.enter="$emit('keyup.enter', $event.target.value)"
         autocomplete="off"
       />
       <div v-if="$slots.append || append" class="input-group-append">
@@ -25,7 +29,7 @@
       </div>
     </div>
     <vue-bootstrap-typeahead-list
-      class="vbt-autcomplete-list"
+      class="vbt-autocomplete-list"
       ref="list"
       v-show="isFocused && data.length > 0"
       :query="inputValue"
@@ -53,7 +57,7 @@ import VueBootstrapTypeaheadList from './VueBootstrapTypeaheadList.vue'
 import ResizeObserver from 'resize-observer-polyfill'
 
 export default {
-  name: 'VueBootstrapTypehead',
+  name: 'VueBootstrapTypeahead',
 
   components: {
     VueBootstrapTypeaheadList
@@ -158,13 +162,28 @@ export default {
       if (typeof this.value !== 'undefined') {
         this.$emit('input', newValue)
       }
+    },
+
+    keyUp(evt) {
+      this.$emit('keyup', evt)
+    },
+
+    setFocus() {
+      this.$refs.input.focus();
+      this.isFocused = true;
+    }
+  },
+
+  watch: {
+    'value' (newValue) {
+      this.inputValue = newValue
     }
   },
 
   data() {
     return {
       isFocused: false,
-      inputValue: ''
+      inputValue: this.value
     }
   },
 
@@ -183,7 +202,7 @@ export default {
 </script>
 
 <style scoped>
-  .vbt-autcomplete-list {
+  .vbt-autocomplete-list {
     padding-top: 5px;
     position: absolute;
     max-height: 350px;

src/components/VueBootstrapTypeaheadList.vue

@@ -1,7 +1,8 @@
 <template>
-  <div class="list-group shadow">
+  <div class="list-group shadow" ref="suggestionList">
     <vue-bootstrap-typeahead-list-item
       v-for="(item, id) in matchedItems" :key="id"
+      :active="isListItemActive(id)"
       :data="item.data"
       :html-text="highlight(item.text)"
       :background-variant="backgroundVariant"
@@ -19,11 +20,11 @@
 import VueBootstrapTypeaheadListItem from './VueBootstrapTypeaheadListItem.vue'
 
 function sanitize(text) {
-  return text.replace(/</g, '&lt;').replace(/>/g, '&gt;')
+  return text ? text.replace(/</g, '&lt;').replace(/>/g, '&gt;') : null
 }
 
 function escapeRegExp(str) {
-  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  return str ? str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') : null
 }
 
 export default {
@@ -41,7 +42,7 @@ export default {
     },
     query: {
       type: String,
-      default: ''
+      default: null
     },
     backgroundVariant: {
       type: String
@@ -59,16 +60,29 @@ export default {
     }
   },
 
+  created() {
+    this.$parent.$on('input', this.resetActiveListItem)
+    this.$parent.$on('keyup.down', this.selectNextListItem)
+    this.$parent.$on('keyup.up', this.selectPreviousListItem)
+    this.$parent.$on('keyup.enter', this.hitActiveListItem)
+  },
+
+  data() {
+    return {
+      activeListItem: -1
+    }
+  },
+
   computed: {
     highlight() {
-      return (text) => {
+      return text => {
         text = sanitize(text)
-        if (this.query.length === 0) {
+        if (this.query && this.query.length === 0) {
           return text
         }
         const re = new RegExp(this.escapedQuery, 'gi')
 
-        return text.replace(re, `<strong>$&</strong>`)
+        return text ? text.replace(re, `<span class="vbt-highlighted">$&</span>`) : null
       }
     },
 
@@ -77,31 +91,95 @@ export default {
     },
 
     matchedItems() {
-      if (this.query.length === 0 || this.query.length < this.minMatchingChars) {
+      // If no query, but minMatchingChars is 0: return trimmed data. filter and sort are not applicable as there is no query string.
+      // simple falsey check should cover 0 length string, null, undefined.
+      if (this.minMatchingChars === 0 && !this.query) return this.data.slice(0, this.maxMatches)
+
+      if (this.query && (this.query.length === 0 || this.query.length < this.minMatchingChars)) {
         return []
       }
 
       const re = new RegExp(this.escapedQuery, 'gi')
 
       // Filter, sort, and concat
       return this.data
-        .filter(i => i.text.match(re) !== null)
+        .filter(i => i.text.match ? i.text.match(re) !== null : false)
         .sort((a, b) => {
           const aIndex = a.text.indexOf(a.text.match(re)[0])
           const bIndex = b.text.indexOf(b.text.match(re)[0])
 
-          if (aIndex < bIndex) { return -1 }
-          if (aIndex > bIndex) { return 1 }
+          if (aIndex < bIndex) {
+            return -1
+          }
+          if (aIndex > bIndex) {
+            return 1
+          }
           return 0
-        }).slice(0, this.maxMatches)
+        })
+        .slice(0, this.maxMatches)
     }
   },
 
   methods: {
     handleHit(item, evt) {
       this.$emit('hit', item)
       evt.preventDefault()
+    },
+
+    hitActiveListItem() {
+      if (this.activeListItem >= 0) {
+        this.$emit('hit', this.matchedItems[this.activeListItem])
+      }
+    },
+
+    isListItemActive(id) {
+      return this.activeListItem === id
+    },
+
+    resetActiveListItem() {
+      this.activeListItem = -1
+    },
+
+    selectNextListItem() {
+      if (this.activeListItem < this.matchedItems.length - 1) {
+        this.activeListItem++
+      } else {
+        this.activeListItem = -1
+      }
+    },
+
+    selectPreviousListItem() {
+      if (this.activeListItem < 0) {
+        this.activeListItem = this.matchedItems.length - 1
+      } else {
+        this.activeListItem--
+      }
+    }
+  },
+
+  watch: {
+    activeListItem(newValue, oldValue) {
+      if (newValue >= 0) {
+        const scrollContainer = this.$refs.suggestionList
+        const listItem = scrollContainer.children[this.activeListItem]
+        const scrollContainerlHeight = scrollContainer.clientHeight
+        const listItemHeight = listItem.clientHeight
+        const visibleItems = Math.floor(
+          scrollContainerlHeight / listItemHeight
+        )
+        if (newValue >= visibleItems) {
+          scrollContainer.scrollTop = listItemHeight * this.activeListItem
+        } else {
+          scrollContainer.scrollTop = 0
+        }
+      }
     }
   }
 }
 </script>
+
+<style scoped>
+  .vbt-highlighted {
+    font-weight: bold;
+  }
+</style>

src/components/VueBootstrapTypeaheadListItem.vue

@@ -3,8 +3,6 @@
     tabindex="0"
     href="#"
     :class="textClasses"
-    @mouseover="active = true"
-    @mouseout="active = false"
   >
     <slot name="suggestion" v-bind="{ data: data, htmlText: htmlText }">
       <span v-html="htmlText"></span>
@@ -17,6 +15,9 @@ export default {
   name: 'VueBootstrapTypeaheadListItem',
 
   props: {
+    active: {
+      type: Boolean
+    },
     data: {},
     htmlText: {
       type: String
@@ -29,19 +30,13 @@ export default {
     }
   },
 
-  data() {
-    return {
-      active: false
-    }
-  },
-
   computed: {
     textClasses() {
-      let classes = ''
-      classes += this.active ? 'active' : ''
-      classes += this.backgroundVariant ? ` bg-${this.backgroundVariant}` : ''
-      classes += this.textVariant ? ` text-${this.textVariant}` : ''
-      return `vbst-item list-group-item list-group-item-action ${classes}`
+      const classes = ['vbst-item', 'list-group-item', 'list-group-item-action']
+      if (this.active) classes.push('active')
+      if (this.backgroundVariant) classes.push(`bg-${this.backgroundVariant}`)
+      if (this.textVariant) classes.push(`text-${this.textVariant}`)
+      return classes.join(' ')
     }
   }
 }

src/examples/CountrySearch.vue

@@ -9,6 +9,7 @@
       :serializer="s => s.name"
       placeholder="Canada, United States, etc..."
       @hit="handleHit"
+      :minMatchingChars=0
     >
       <template slot="append">
         <b-btn @click="search" variant="success">

tests/unit/VueBootstrapTypeaheadList.spec.js

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils'
+import {mount} from '@vue/test-utils'
 import VueBootstrapTypeaheadList from '@/components/VueBootstrapTypeaheadList.vue'
 import VueBootstrapTypeaheadListItem from '@/components/VueBootstrapTypeaheadListItem.vue'
 
@@ -78,6 +78,71 @@ describe('VueBootstrapTypeaheadList', () => {
     wrapper.setProps({
       query: 'Canada'
     })
-    expect(wrapper.find(VueBootstrapTypeaheadListItem).vm.htmlText).toBe('<strong>Canada</strong>')
+    expect(wrapper.find(VueBootstrapTypeaheadListItem).vm.htmlText).toBe('<span class="vbt-highlighted">Canada</span>')
+  })
+  it('Resets the active list item', () => {
+    wrapper.setProps({
+      query: 'Can'
+    })
+    wrapper.vm.$parent.$emit('keyup.down')
+    wrapper.vm.resetActiveListItem()
+    expect(wrapper.vm.activeListItem).toBe(-1)
+  })
+
+  it('Selects next list item on keyup.down', () => {
+    wrapper.setProps({
+      query: 'Can'
+    })
+    wrapper.vm.$parent.$emit('keyup.down')
+    expect(wrapper.vm.activeListItem).toBe(0)
+  })
+
+  it('Wraps back to input on keyup.down at bottom of list', () => {
+    wrapper.setProps({
+      query: 'Canada'
+    })
+    wrapper.vm.$parent.$emit('keyup.down')
+    wrapper.vm.$parent.$emit('keyup.down')
+    expect(wrapper.vm.activeListItem).toBe(-1)
+  })
+
+  it('Selects previous list item on keyup.up', () => {
+    wrapper.setProps({
+      query: 'Can'
+    })
+    wrapper.vm.$parent.$emit('keyup.up')
+    expect(wrapper.vm.activeListItem).toBe(wrapper.vm.matchedItems.length - 1)
+  })
+
+  it('Selects input on keyup.up at when at top of the list', () => {
+    wrapper.setProps({
+      query: 'Can'
+    })
+    wrapper.vm.$parent.$emit('keyup.down')
+    wrapper.vm.$parent.$emit('keyup.up')
+    expect(wrapper.vm.activeListItem).toBe(-1)
+  })
+
+  it('Hits active item on keyup.enter', () => {
+    wrapper.setProps({
+      query: 'Can'
+    })
+    wrapper.vm.$parent.$emit('keyup.down') // advance active Item
+
+    wrapper.vm.$on('hit', (hitItem) => {
+      expect(hitItem).toBe(wrapper.vm.matchedItems[0])
+    })
+
+    wrapper.vm.$parent.$emit('keyup.enter')
+  })
+
+  it('Indicates list item is active or inactive', () => {
+    wrapper.setProps({
+      query: 'Can'
+    })
+    wrapper.vm.$parent.$emit('keyup.down')
+    expect(wrapper.vm.isListItemActive(0)).toBeTruthy()
+    expect(wrapper.vm.isListItemActive(1)).toBeFalsy()
   })
 })
+

tests/unit/VueBootstrapTypeaheadListItem.spec.js

@@ -22,18 +22,9 @@ describe('VueBootstrapTypeaheadListItem.vue', () => {
     expect(wrapper.classes()).toEqual(expect.arrayContaining(['bg-light']))
   })
 
-  it('Applies the active class on mouseOver', () => {
-    expect(wrapper.vm.active).toBe(false)
-    wrapper.trigger('mouseover')
+  it('Renders active class properly', () => {
+    wrapper.setProps({active: true})
     expect(wrapper.vm.active).toBe(true)
     expect(wrapper.classes()).toEqual(expect.arrayContaining(['active']))
   })
-
-  it('Removes the active class on mouse out', () => {
-    wrapper.trigger('mouseover')
-    expect(wrapper.vm.active).toBe(true)
-    wrapper.trigger('mouseout')
-    expect(wrapper.vm.active).toBe(false)
-    expect(wrapper.classes()).toEqual(expect.not.arrayContaining(['active']))
-  })
 })