vue-email-autocomplete
A configurable & lightweight Vue wrapper component that enables "out of the box" email autocomplete/suggestions on input elements.
✅ A wrapper component so you can use alongside other form enabled libraries (such as Buefy).
✅ Customizable.
✅ Allow users to easily navigate the suggestions list by simply using the "up/down" keys.
✅ Users can also auto-fill the input with the desired value by hitting the "enter" key upon selection.
Installation
Basic Usage
Configuration Example (Custom Domain Lists)
Configuration Example (On Submit Callbacks)
Configuration Example (Custom Inline Styles)
Configuration Example (CSS stylesheet overriddes)
Props
Prop | Type | Optional | Default | Description |
---|---|---|---|---|
domains | Array | No | A selection of the most statistically popular email domain extensions. | A customized list of email domain extensions. |
onCompletion | Function | Yes | N/A | A function that you'd like the component to invoke after the user has selected a suggested completion (e.g. update the value/model of the input element). |
onSubmit | Function | No | N/A | A function that you'd like the component to invoke once the user hits the "enter" key when the nested input is in focus (e.g. carry out validations or submit the form). |
css | Object | No | N/A | CSS style overrides for specific elements of the suggestions component (See above examples). |
:racing_car: Roadmap
- Add extra CSS override mappings.
- Add ability to override CSS with a stylesheet (enables usage with media queries).
- Autocomplete default suggestions list to be based on browser language detection, which will make the suggestions more regionally relevant.
- Vue 3 refactoring/versioning.