A Vue.js component for autocomplete functionality in input fields.
You can install the package via npm: Copy code
npm install vue-best-autocomplete
Basic Usage Copy code
<template>
<autocomplete :items="addressList" @selected="handleSelected"></autocomplete>
</template>
<script>
/*
* Include Component and style
*/
import Autocomplete from 'vue-best-autocomplete'
import 'vue-best-autocomplete/dist/Autocomplete.css'
export default {
components: {
Autocomplete,
},
data() {
return {
addressList: [
{ id: 1, title: 'New York, USA' },
{ id: 2, title: 'London, UK' },
// Add more address objects as needed
],
};
},
methods: {
handleSelected(address) {
console.log('Selected address:', address);
// Handle selected address
},
},
};
</script>
items
(Array): An array of objects representing the autocomplete options. Each object should have at least an id and title property.
selected
: Triggered when an option is selected. Emits the selected option object.
You can customize the appearance of the autocomplete input and suggestions by overriding the CSS classes provided by the component.
.input-wrapper
: Wrapper class for the input field..data-input-success
: Class applied when input is successful..base-input-error
: Class applied when there's an error in input..suggestion-list-active
: Class applied to the suggestion list when active.
You can customize the appearance by overriding these CSS classes in your project's stylesheet.
This project is licensed under the GNU License - see the LICENSE file for details.