A configurable & lightweight Vue wrapper component that enables

Related tags

Autocomplete plugin vuejs component vue hoc
Overview

vue-email-autocomplete

A configurable & lightweight Vue wrapper component that enables "out of the box" email autocomplete/suggestions on input elements.

Autocomplete in Action

โœ… 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

# yarn
yarn add vue-email-autocomplete

# npm
npm install vue-email-autocomplete --save

Basic Usage

<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>

<script>

/* Import Package and Styles */

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

export default {

  /* Import Component */

  components: {
    EmailAutoComplete
  },

  /* Prime Model as Standard */

  data() {
    return {
      emailAddress: ''
    }
  }

}
script>

Configuration Example (Custom Domain Lists)

<template>

  /* A "domains" prop is added to the component and references the array of domains within the data property below */

  <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>

template>

<script>

/* Import Package and Styles */

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

export default {

  /* Import Component */

  components: {
    EmailAutoComplete
  },

  /* Prime Model as Standard */

  data() {
    return {
      emailAddress: '',
      customDomains: [

        "domain1.com",
        "domain2.com",
        "domain3.com",
        "domain4.com"

      ]
    }
  }

}
script>

Configuration Example (On Submit Callbacks)

<template>

  /* An "onSubmit" prop is added to the component and references a method below */

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

template>

<script>

/* Import Package and Styles */

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

export default {

  /* Import Component */

  components: {
    EmailAutoComplete
  },

  /* Prime Model as Standard */

  data() {
    return {
      emailAddress: ''
    }
  }

  /* Methods */

  methods: {

    validateForm() {

      /* This is called when a user hits enter when focused on the wrapped input element */

    }

  }

}
script>

Configuration Example (Custom Inline Styles)

<template>

  /* A "css" prop is added to the component and references a computed property below */

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

template>

<script>

/* Import Package and Styles */

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

export default {

  /* Import Component */

  components: {
    EmailAutoComplete
  },

  /* Prime Model as Standard */

  data() {
    return {
      emailAddress: ''
    }
  }

  /* Computed Properties */

  computed: {

    styleOverrides() {

      return {

        /* Edit style for the suggestions "outer" container */

        container: {
          position: 'fixed',
          top: '40px',
          left: '40px'
        },

        /* Edit style for the suggestions overlay */

        overlay: {
          backgroundColor: #FFF
        },

        /* Edit style for the suggestions text */

        text: {

          /* Main text */

          suggestion: {
            color: purple
          },

          /* Highlighted/matched text */

          highlight: {
            color: blue
          }

        }

      }

    }

  }

}
script>

Configuration Example (CSS stylesheet overriddes)

Coming Soon!

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).

๐ŸŽ๏ธ 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.

๐Ÿบ Buy me a Beer Cider

Donations are welcome and very much appreciated!

ETH: 0xb53dF77A7B18948f8f8FafF5DeF7bCc4E7Dbb30A
BTC (Native Segwit): bc1qval55py30qt0jtrvuaa3zdfsft2weurnkn0kcj
BTC (Segwit): 3BiTzQLcqwyCiMa8ydCu6dpdZzo8XgSzvU

Contributions

If you'd like to contribute and add functionality to this project, feel free to fork this repo, create a new feature branch and then submit a pull request.

You might also like...
๐Ÿ” Autosuggest component built for Vue
๐Ÿ” Autosuggest component built for Vue

vue-autosuggest ๐Ÿ” Autosuggest component built for Vue. Table of Contents Examples Features Installation Usage Props Inspiration Contributors LICENSE

ะะปะตะบัะตะน ะœั‹ัˆะบะธะฝ 0 Dec 12, 2019
vue autoComplete component

vueto-complete vue autoComplete component Index Features Installation Examples Props Slots Events Styling LICENSE Features Supports full control over

Ahmed Abdallah 16 Jan 10, 2022
Autocomplete - Accessible autocomplete component for vanilla JavaScript and Vue
Autocomplete - Accessible autocomplete component for vanilla JavaScript and Vue

Autocomplete Accessible autocomplete component for vanilla JavaScript and Vue. Demo Take a look at the documentation page, and the Codepen examples. F

Muhamad Septian 0 Dec 3, 2019
A simple modular Vuejs component that autosuggest input from a dyanamic or static data querying.
A simple modular Vuejs component that autosuggest input from a dyanamic or static data querying.

v-autosuggest A simple modular Vuejs component that autosuggest input from a dyanamic or static data querying. Table of contents Installation Usage Pr

soraino 9 Nov 24, 2022
A simple tag component with typeahead
A simple tag component with typeahead

v-tag-suggestion A simple tag component with typeahead โŒจ๏ธ Install via npm npm install vue-tag-suggestion Import and register where you want to use imp

Maheshkumar 39 Mar 26, 2022
vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications
vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications

Vue Instant! vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications. Table of contents Examp

Santiago Blanco 420 Dec 27, 2022
Google Autocomplete Vue Componet
Google Autocomplete Vue Componet

Google Autocomplete I am sharing this component because I was overwhelmed by complicated examples to achieve this simple job. So, I will try to be as

Gustavo Ocanto 275 Aug 29, 2022
๐Ÿงฑ Very Downshift like autocomplete solution for Vue

Vue Combo Blocks ๐Ÿงฑ Provides all the building blocks needed for accessible autocomplete, combobox, or typeahead component. A very Downshift like autoc

Simeon Kerkola 17 Jul 7, 2022
Swapi - vue-3 front for SWAPI

swapi Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints and

Diogo Antunes 0 Jan 3, 2022
Comments
  • README example has invalid element names

    README example has invalid element names

    Simply change

        <email-autocomplete ref="EmailAutoComplete" :onCompletion='(val) => emailAddress = val'>
        <input type="text" v-model='emailAddress' @keydown.native='$refs.EmailAutoComplete.check($event)' />
    </email-auto-complete> <!-- this tag ending has an extra hyphen !-->

    to something like

        <email-autocomplete ref="EmailAutoComplete" :onCompletion='(val) => emailAddress = val'>
        <input type="text" v-model='emailAddress' @keydown.native='$refs.EmailAutoComplete.check($event)' />
    </email-autocomplete>
    opened by givensuman 1
Releases(1.2.1)
Owner
James Wylie
Full Stack Developer / Cider Drinker
James Wylie
GitHub
Autocomplete component for Vue.js

v-autocomplete Autocomplete component for Vue.js This component is css-free. The idea is to be used with any framework. Installation Using yarn yarn a

Marcos 347 Jan 3, 2023
Autocomplete component for Vue js

vuejs-auto-complete A Vue autocomplete component npm install vuejs-auto-complete --save Usage Installation, add autocomplete component into your app i

Charlie Kassel 136 Nov 8, 2022
๐Ÿ” Vue autosuggest component.

vue-autosuggest ?? Autosuggest component built for Vue. Table of Contents Examples Features Installation Usage Props Inspiration Contributors LICENSE

Darren Jennings 599 Dec 31, 2022
Feature-rich autocomplete component for Vue.js

vue-simple-suggest Simple yet feature-rich autocomplete component for Vue.js Install npm install --save vue-simple-suggest See installation guide for

Marketplace Technologies 442 Jan 4, 2023
An autocomplete/typeahead component for Vue 2 and Bootstrap 4

vue-bootstrap-typeahead A simple list-group based typeahead/autocomplete using Bootstrap 4 and Vue 2 View The Examples Installation From NPM: > npm i

Alex Urquhart 209 Nov 19, 2022
A Vue component for autocomplete email domains

vue-email-dropdown A Vue component for autocomplete email domains Features Allows passing a list of domains to be used in for the suggestions. Allows

Danny Feliz 27 Nov 24, 2022
Autocomplete Component for Vue.Js

vue-autocomplete Autocomplete Component for Vue.Js Intro Vue Autocomplete is a Vue.Js component to make some suggestions for user input. come with .vu

Naufal Rabbani 210 Jan 18, 2022
Mention component for Vue.js

vue-mention Mention popper for input and textarea Documentation Sponsors Quick start <script> import { Mentionable } from 'vue-mention' const users =

Guillaume Chau 462 Dec 22, 2022
Vue 2 Component to make Autocomplete element.

Vue 2 Autocomplete Autocomplete component for Vue 2. This is a fork of vue2-autocomplete - Naufal Rabbani [email protected] Install You can imp

Eduardo Aguad 0 Oct 12, 2017
A Vue Autocomplete component with accessibility and simplicity in mind.

VueCompleter A Vue Autocomplete component with accessibility and simplicity in mind. Installation npm install vue-completer or yarn add vue-completer

Tom Elliott 3 Nov 8, 2020