vue-simple-suggest
A simple autocomplete for Vue 3.
Forked from @tbl0605/vue-simple-suggest which was forked from @KazanExpress/vue-simple-suggest.
Install
npm i @vojtechlanka/vue-simple-suggest
Usage
<template>
<vue-simple-suggest v-model="valueCurrent" :list="autocompleteItems" :filter-by-query="true" @update:model-select="(item) => selectedCurrent = item"/>
</template><script>
import VueSimpleSuggest from '@vojtechlanka/vue-simple-suggest'
export default {
components: { VueSimpleSuggest },
data () {
return {
valueCurrent: '',
selectedCurrent: null,
autocompleteItems: ['Dog', 'Cat', 'Lizard']
}
}
}
</script>All options specified by original documentation should still work.
Breaking changes
When the using custom input, listener bindings must be added (provided by the vue-simple-suggest component) to the input element.
For a native html input, bind the slot prop "field":
<vue-simple-suggest v-model="model" ...>
<template #default="{ field }">
<input v-bind="field" type="text" />
</template>
</vue-simple-suggest>For a custom input component, bind the slot prop "componentField":
<vue-simple-suggest v-model="model" ...>
<template #default="{ componentField }">
<my-custom-input v-bind="componentField" ... />
</template>
</vue-simple-suggest>