Simple Autocomplete/Typeahead Component For Bootstrap 4

A simple yet configurable autocomplete & typeahead component for Vue.js and Bootstrap 4. Easy to integrate with any JSON based API.

How to use it:

1. Install and import the vue-typeahead-bootstrap component.

import VueTypeaheadBootstrap from 'vue-typeahead-bootstrap';

2. Register the component.

// Global
Vue.component('vue-typeahead-bootstrap', VueTypeaheadBootstrap)
// or Local
export default {
  components: {
    VueTypeaheadBootstrap
  }
}

3. Create a simple country select with the typeahead functionality.

<template>
  <div>
    Options: `Canada, United States, Mexico`,
    <vue-typehead-bootstrap
      :data="['Canada', 'United States', 'Mexico']"
      v-model="query"
      placeholder="Choose a country"
    />
    Selected Country: {{query}}
  </div>
</template>

export default {
  data(){
    return {
      query: ''
    }
  }
}

4. Available props.

size: {
  type: String,
  default: null,
  validator: size => ['lg', 'sm'].indexOf(size) > -1
},
value: {
  type: String
},
disabled: {
 type: Boolean,
 default: false
},
data: {
  type: Array,
  required: true,
  validator: d => d instanceof Array
},
serializer: {
  type: Function,
  default: (d) => d,
  validator: d => d instanceof Function
},
backgroundVariant: String,
textVariant: String,
inputClass: {
  type: String,
  default: ''
},
maxMatches: {
  type: Number,
  default: 10
},
minMatchingChars: {
  type: Number,
  default: 2
},
disableSort: {
  type: Boolean,
  default: false
},
showOnFocus: {
  type: Boolean,
  default: false
},
showAllResults: {
  type: Boolean,
  default: false
},
autoClose: {
  type: Boolean,
  default: true
},
placeholder: String,
prepend: String,
append: String,
highlightClass: String

Preview:

Changelog:

v2.13.0 (08/20/2022)

• Fix/update project
• Update/vuepress dart sass
• Emit blur when underlying input blurs, unless the focus changed to a list item
• Emit focus event when input receives focus

v2.12.0 (08/27/2021)

• Revert localization changes
• Update CI build targets

v2.11.1 (04/29/2021)

• Improve screen reader text support

v2.8.0 (02/09/2021)

• Bugs fixed

v2.7.2 (01/01/2021)

• Update highlight.js for security vulnerability

v2.5.6 (12/28/2020)

• Formalize IE close fix

v2.5.5 (12/20/2020)

• Include lodash in dependencies

v2.5.4 (11/12/2020)

• Reduced package size

v2.5.3 (09/28/2020)

• Attempted a11y improvements to use standard combobox aria tags
• Fix IE dropdowns closing
• Fix broken key handling events
• Propagate keyup events from the input

v2.4.1 (07/05/2020)

• Add support for disabling list items
• Fix bug when given a null query

v2.3.0 (06/18/2020)

• Add support for providing a name for the input

Download Details:

Author: mattzollinhofer

Live Demo: https://mattzollinhofer.github.io/vue-typeahead-bootstrap-docs/

Download Link: https://github.com/mattzollinhofer/vue-typeahead-bootstrap/archive/master.zip

Official Website: https://github.com/mattzollinhofer/vue-typeahead-bootstrap

Install & Download:

# Yarn
$ yarn add vue-typeahead-bootstrap

# NPM
$ npm install vue-typeahead-bootstrap --save