You can add your custom header to the autocomplete.
Autocomplete
Extended input that provide suggestions while the user types. Use with Field to access all functionalities
Selected:
<template>
<section>
<p class="content"><b>Selected:</b> {{ selected }}</p>
<b-field label="Find a JS framework">
<b-autocomplete
rounded
v-model="name"
:data="filteredDataArray"
placeholder="e.g. jQuery"
icon="magnify"
@select="option => selected = option">
<template slot="empty">No results found</template>
</b-autocomplete>
</b-field>
</section>
</template>
<script>
export default {
data() {
return {
data: [
'Angular',
'Angular 2',
'Aurelia',
'Backbone',
'Ember',
'jQuery',
'Meteor',
'Node.js',
'Polymer',
'React',
'RxJS',
'Vue.js'
],
name: '',
selected: null
}
},
computed: {
filteredDataArray() {
return this.data.filter((option) => {
return option
.toString()
.toLowerCase()
.indexOf(this.name.toLowerCase()) >= 0
})
}
}
}
</script>
# Object array
Selected:
<template>
<section>
<div class="block">
<b-switch v-model="openOnFocus">
Open dropdown on focus
</b-switch>
<b-switch v-model="keepFirst">
Keep-first <small>(will always have first option pre-selected)</small>
</b-switch>
</div>
<p class="content"><b>Selected:</b> {{ selected }}</p>
<b-field label="Find a name">
<b-autocomplete
v-model="name"
placeholder="e.g. Anne"
:keep-first="keepFirst"
:open-on-focus="openOnFocus"
:data="filteredDataObj"
field="user.first_name"
@select="option => selected = option">
</b-autocomplete>
</b-field>
</section>
</template>
<script>
const data = require('@/data/sample.json')
export default {
data() {
return {
data,
keepFirst: false,
openOnFocus: false,
name: '',
selected: null
}
},
computed: {
filteredDataObj() {
return this.data.filter((option) => {
return option.user.first_name
.toString()
.toLowerCase()
.indexOf(this.name.toLowerCase()) >= 0
})
}
}
}
</script>
# Header
Selected:
<template>
<section>
<p class="content"><b>Selected:</b> {{ selected }}</p>
<b-field label="Find or add a Fruit">
<b-autocomplete
v-model="name"
ref="autocomplete"
:data="filteredDataArray"
placeholder="e.g. Orange"
@select="option => selected = option">
<template slot="header">
<a @click="showAddFruit">
<span> Add new... </span>
</a>
</template>
<template slot="empty">No results for {{name}}</template>
</b-autocomplete>
</b-field>
</section>
</template>
<script>
export default {
data() {
return {
data: [
'Orange',
'Apple',
'Banana',
'Pear',
'Lemon',
'Strawberry',
'Kiwi'
],
name: '',
selected: null
}
},
computed: {
filteredDataArray() {
return this.data.filter((option) => {
return option
.toString()
.toLowerCase()
.indexOf(this.name.toLowerCase()) >= 0
})
}
},
methods: {
showAddFruit() {
this.$buefy.dialog.prompt({
message: `Fruit`,
inputAttrs: {
placeholder: 'e.g. Watermelon',
maxlength: 20,
value: this.name
},
confirmText: 'Add',
onConfirm: (value) => {
this.data.push(value)
this.$refs.autocomplete.setSelected(value)
}
})
}
}
}
</script>
You can add your custom footer to the autocomplete.
Selected:
<template>
<section>
<p class="content"><b>Selected:</b> {{ selected }}</p>
<b-field label="Find or add a Fruit">
<b-autocomplete
v-model="name"
ref="autocomplete"
:data="filteredDataArray"
placeholder="e.g. Orange"
@select="option => selected = option">
<template slot="footer">
<a @click="showAddFruit">
<span> Add new... </span>
</a>
</template>
<template slot="empty">No results for {{name}}</template>
</b-autocomplete>
</b-field>
</section>
</template>
<script>
export default {
data() {
return {
data: [
'Orange',
'Apple',
'Banana',
'Pear',
'Lemon',
'Strawberry',
'Kiwi'
],
name: '',
selected: null
}
},
computed: {
filteredDataArray() {
return this.data.filter((option) => {
return option
.toString()
.toLowerCase()
.indexOf(this.name.toLowerCase()) >= 0
})
}
},
methods: {
showAddFruit() {
this.$buefy.dialog.prompt({
message: `Fruit`,
inputAttrs: {
placeholder: 'e.g. Watermelon',
maxlength: 20,
value: this.name
},
confirmText: 'Add',
onConfirm: (value) => {
this.data.push(value)
this.$refs.autocomplete.setSelected(value)
}
})
}
}
}
</script>
# Async with custom template
You can have a custom template by adding a scoped slot to it.
API from TMDb.
Selected:
<template>
<section>
<p class="content"><b>Selected:</b> {{ selected }}</p>
<b-field label="Find a movie">
<b-autocomplete
:data="data"
placeholder="e.g. Fight Club"
field="title"
:loading="isFetching"
@typing="getAsyncData"
@select="option => selected = option">
<template slot-scope="props">
<div class="media">
<div class="media-left">
<img width="32" :src="`https://image.tmdb.org/t/p/w500/${props.option.poster_path}`">
</div>
<div class="media-content">
{{ props.option.title }}
<br>
<small>
Released at {{ props.option.release_date }},
rated <b>{{ props.option.vote_average }}</b>
</small>
</div>
</div>
</template>
</b-autocomplete>
</b-field>
</section>
</template>
<script>
import debounce from 'lodash/debounce'
export default {
data() {
return {
data: [],
selected: null,
isFetching: false
}
},
methods: {
// You have to install and import debounce to use it,
// it's not mandatory though.
getAsyncData: debounce(function (name) {
if (!name.length) {
this.data = []
return
}
this.isFetching = true
this.$http.get(`https://api.themoviedb.org/3/search/movie?api_key=bb6f51bef07465653c3e553d6ab161a8&query=${name}`)
.then(({ data }) => {
this.data = []
data.results.forEach((item) => this.data.push(item))
})
.catch((error) => {
this.data = []
throw error
})
.finally(() => {
this.isFetching = false
})
}, 500)
}
}
</script># Async with infinite scroll
With check-infinite-scroll and infinite-scroll event you can listen to the end of the scroll list to implement an infinite scroll strategy.
API from TMDb.
Selected:
<template>
<section>
<p class="content"><b>Selected:</b> {{ selected }}</p>
<b-field label="Find a movie">
<b-autocomplete
:data="data"
placeholder="e.g. Fight Club"
field="title"
:loading="isFetching"
:check-infinite-scroll="true"
@typing="getAsyncData"
@select="option => selected = option"
@infinite-scroll="getMoreAsyncData">
<template slot-scope="props">
<div class="media">
<div class="media-left">
<img width="32" :src="`https://image.tmdb.org/t/p/w500/${props.option.poster_path}`">
</div>
<div class="media-content">
{{ props.option.title }}
<br>
<small>
Released at {{ props.option.release_date }},
rated <b>{{ props.option.vote_average }}</b>
</small>
</div>
</div>
</template>
<template slot="footer">
<span v-show="page > totalPages" class="has-text-grey"> Thats it! No more movies found. </span>
</template>
</b-autocomplete>
</b-field>
</section>
</template>
<script>
import debounce from 'lodash/debounce'
export default {
data() {
return {
data: [],
selected: null,
isFetching: false,
name: '',
page: 1,
totalPages: 1
}
},
methods: {
// You have to install and import debounce to use it,
// it's not mandatory though.
getAsyncData: debounce(function (name) {
// String update
if (this.name !== name) {
this.name = name
this.data = []
this.page = 1
this.totalPages = 1
}
// String cleared
if (!name.length) {
this.data = []
this.page = 1
this.totalPages = 1
return
}
// Reached last page
if (this.page > this.totalPages) {
return
}
this.isFetching = true
this.$http.get(`https://api.themoviedb.org/3/search/movie?api_key=bb6f51bef07465653c3e553d6ab161a8&query=${name}&page=${this.page}`)
.then(({ data }) => {
data.results.forEach((item) => this.data.push(item))
this.page++
this.totalPages = data.total_pages
})
.catch((error) => {
throw error
})
.finally(() => {
this.isFetching = false
})
}, 500),
getMoreAsyncData: debounce(function () {
this.getAsyncData(this.name)
}, 250)
}
}
</script>
# API
Name | Description | Type | Values | Default |
|---|---|---|---|---|
v-model | Binding value | String, Number | — | — |
data | Options / suggestions | Array<String>, Array<Number>, Array<Object> | — | — |
field | Property of the object (if data is array of objects) to use as display text, and to keep track of selected option | String | — | value |
custom-formatter | Function to format an option to a string for display in the input as alternative to field prop) | Function | — | |
clear-on-select | Clear input text on select | Boolean | — | false |
open-on-focus | Open dropdown list on focus | Boolean | — | false |
keep-first | The first option will always be pre-selected (easier to just hit enter or tab) | Boolean | — | false |
size | Vertical size of input, optional | String | is-small, is-medium, is-large | — |
expanded | Makes input full width when inside a grouped or addon field | Boolean | — | false |
loading | Add the loading state to the input | Boolean | — | false |
icon | Icon name to be added | String | — | — |
icon-pack | Icon pack to use | String | mdi, fa, fas, far, fad, fal | mdi |
maxlength | Same as native maxlength, plus character counter | String, Number | — | — |
check-infinite-scroll | Makes the component check if list reached scroll end and emit infinite-sroll event. | Boolean | — | false |
| Any native attribute | — | — | — | — |
This page is open source. Noticed a typo or something's unclear?