Vue Bulma Typeahead
A simple Vue.js 2 Bulma CSS-styled component with a typeahead dropdown
View the demo.
Installation
Install via NPM:
npm install vue-bulma-typeahead --save
Usage
Props
| Name |
Type |
Required |
Default |
Description |
| source |
Array |
True |
[] |
A data source. Must contain strings. |
| onSelect |
Function |
True |
N/A |
Suggestion selected event callback. Parameters: value, name |
| onChange |
Function |
True |
N/A |
Typeahead input value changed event callback. Parameters: value, name |
| limit |
Number |
False |
5 |
Max number of suggestions to show in dropdown. |
| name |
String |
False |
N/A |
Name of the typeahead. |
| async |
Boolean |
False |
True |
Whether to debounce the suggestions or not. |
| placeholder |
String |
False |
"" |
Placeholder value for input field |
Example
Use like below. See the example code in the demo.
<template>
<div class="container">
<label class="label">U.S. State</label>
<p class="control has-icons-left">
<typeahead :source="source" :onSelect="onSelect" :onChange="onChange" :limit="5"></typeahead>
<span class="icon is-small is-left">
<i class="fa fa-magic"></i>
</span>
</p>
</div>
</template>
<script>
import Typeahead from 'vue-bulma-typeahead'
export default {
name: 'demo',
components: { Typeahead },
data () {
return {
source: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi',
'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico',
'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon',
'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee',
'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia',
'Wisconsin', 'Wyoming'],
value: ''
}
},
methods: {
onSelect (value) {
this.value = value
},
onChange (value) {
this.value = value
}
}
}
</script>
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
For detailed explanation on how things work, consult the docs for vue-loader.