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