Customizable Email Autocomplete/Suggestion Component For Vue

Install & Download:

# Yarn
$ yarn add vue-email-autocomplete
# NPM
$ npm i vue-email-autocomplete --save

Description:

A Vue component that enables email autocomplete & autosuggest functionality on the input field.

How to use it:

1. Import and register the component.

import EmailAutoComplete from "vue-email-autocomplete";
import "vue-email-autocomplete/dist/vue-email-autocomplete.css";

export default {
  components: {
    EmailAutoComplete
  }
}

2. Add a basic email autocomplete input component to the app.

<template>
  <email-autocomplete ref="EmailAutoComplete" :onCompletion='(val) => emailAddress = val'>
    <input type="text" v-model='emailAddress' @keydown.native='$refs.EmailAutoComplete.check($event)' />
  </email-auto-complete>
</template>

export default {
  components: {
    EmailAutoComplete
  },
  data() {
    return {
      emailAddress: ''
    }
  }
}

3. Customize the domain list.

<email-auto-complete ref="EmailAutoComplete" :onCompletion='(val) => emailAddress = val' :domains='customDomains'>
  <input type="text" v-model='emailAddress' @keydown.native='$refs.EmailAutoComplete.check($event)' />
</email-auto-complete>

export default {
  components: {
    EmailAutoComplete
  },
  data() {
    return {
      emailAddress: '',
      customDomains: [
        "google.com",
        "yahoo.com",
        "aol.com",
      ]
    }
  }
}

4. All available props.

css: {
  type: Object,
  required: false,
  default: null
},
onCompletion: {
  type: Function,
  required: true
},
onSubmit: {
  type: Function,
  required: false,
  default: null
},
domains: {
  type: Array,
  required: false,
  default: null
}