vue-bootstrap-typeahead is a simple list-group based typeahead/autocomplete using Bootstrap 4 and Vue 2.
vue bootstrap typeahead, vuejs autocomplete component, vue autocomplete example, vue autocomplete dropdown
bootstrap-vuecompatible- Append and prepend icons and buttons
- Works well with API JSON responses
How to make use of it:
Installation:
npm i vue-bootstrap-typeahead --save
1. Import and register the component.
import VueBootstrapTypeahead from 'vue-bootstrap-typeahead'
// Global registration
Vue.component('vue-bootstrap-typeahead', VueBootstrapTypeahead)
// OR
// Local registration
export default {
components: {
VueBootstrapTypeahead
}
}
2. The only required attribute is a data array.
<vue-bootstrap-typeahead v-model="query" :data="['Canada', 'USA', 'Mexico']" />
<template>
<vue-bootstrap-typeahead
:data="addresses"
v-model="addressSearch"
size="lg"
:serializer="s => s.text"
placeholder="Type an address..."
@hit="selectedAddress = $event"
>
</template>
<script>
import _ from 'underscore'
const API_URL = 'https://api-url-here.com?query=:query'
export default {
name: 'TestComponent',
data() {
return {
addresses: [],
addressSearch: '',
selectedAddress: null
}
},
methods: {
async getAddresses(query) {
const res = await fetch(API_URL.replace(':query', query))
const suggestions = await res.json()
this.addresses = suggestions.suggestions
}
},
watch: {
addressSearch: _.debounce(function(addr) { this.getAddresses(addr) }, 500)
}
}
</script>Attributes
| Name | Type | Default | Description |
|---|---|---|---|
| data | Array | An array of data is to be available for querying. Required | |
| serializer | Function | input => input | The function used to convert the entries in the data array into a text string. |
| size | String | Size of the input-group. Valid values: sm or lg | |
| backgroundVariant | String | Background color for the autocomplete result list-group items. | |
| textVariant | String | Text color for the autocomplete result list-group items. See valid values | |
| inputClass | String | Class to the added to the input tag for validation, etc. | |
| maxMatches | Number | 10 | The maximum amount of list items to appear. |
| minMatchingChars | Number | 2 | Minimum matching characters in the query before the typeahead list appears |
| prepend | String | Text to be prepended to the input-group | |
| append | String | Text to be appended to the input-group |
Events
| Name | Description |
|---|---|
hit | Triggered when an autocomplete item is selected. The entry in the input data an array that was selected is returned. |
input | The component can be used with v-model |
autocomplete/typeahead component for vue js, vue-bootstrap-typeahead Plugin/Gihub
See Demo And Download
Official Website(alexurquhart): Click Here
This superior jQuery/javascript plugin is developed by alexurquhart. For extra advanced usage, please go to the official website.
