A Vue component for autocomplete email domains

Overview

vue-email-dropdown

A Vue component for autocomplete email domains

Build Status

Features

  • Allows passing a list of domains to be used in for the suggestions.
  • Allows passing a list of default domains that are going to be used when type @.
  • Closes the list by pressing Esc.
  • Allows the navigate the list by pressing Up / Down.
  • Closes the list on click outside.
  • Allows configuring the list size.

Demo

Edit Demo vue-email-dropdown

Demo

Props

Prop Type Required Default Description
domains Array True - All domains that should be used to make a domain suggestions.
defaultDomains Array False [] Default domains that should be displayed once `@` is typed.
initialValue String False "" Initial value for the email field.
maxSuggestions Number False 4 How many domain suggestions should displayed.
closeOnClickOutside Boolean False true Hide the suggestion list if you click outside the list.
inputClasses String|Array|Object False "" Classes that will be apply to the email field.

Installation

npm install vue-email-dropdown --save

# or with yarn

yarn add vue-email-dropdown

Usage

<template>
  <EmailDropdown :domains="domains" :defaultDomains="defaultDomains" />
</template>

<script>
// Import package
import EmailDropdown from "vue-email-dropdown";
// Import styles
import "vue-email-dropdown/dist/vue-email-dropdown.css";

export default {
  components: {
    EmailDropdown
  },
  data() {
    return {
      domains: [
        "yourcompany.com",
        "google.com",
        "gmx.de",
        "googlemail.com",
        "hotmail.fr",
        "hotmail.it",
        "web.de",
        "yahoo.co.in",
        "yahoo.com",
        "yahoo.in"
      ],
      defaultDomains: ["gmail.com", "hotmail.com", "msn.com", "outlook.com", "yahoo.com"]
    };
  }
};
</script>

Development setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your unit tests

npm run test

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

Contributing

  1. Fork it (https://github.com/dannyfeliz/vue-email-dropdown/fork)
  2. Create your feature branch (git checkout -b feature/fooBar)
  3. Commit your changes (git commit -am 'Add some fooBar')
  4. Push to the branch (git push origin feature/fooBar)
  5. Create a new Pull Request
You might also like...
A simple tags input with typeahead (autocomplete) built with Vue.js 2.
A simple tags input with typeahead (autocomplete) built with Vue.js 2.

Vue Tags Input v4 Forked from voerro/vue-tagsinput A simple tags input with typeahead built with Vue.js 2. Installation via NPM npm i @seriouslag/vue-

A simple tags input with typeahead (autocomplete) built with Vue.js 2.
A simple tags input with typeahead (autocomplete) built with Vue.js 2.

Voerro Vue Tags Input v2 A simple tags input with typeahead built with Vue.js 2. Live Demo Installation via NPM npm i @voerro/vue-tagsinput --save-dev

A better vim plugin for stylus, including proper and up-to-date syntax highligting, indentation and autocomplete
A better vim plugin for stylus, including proper and up-to-date syntax highligting, indentation and autocomplete

Vim Stylus Vim + Stylus = fast, effective and convenient CSS workflow! Features All HTML5 tags and CSS3 props are covered Correct highlighting for int

🔍 Vue autosuggest component.
🔍 Vue autosuggest component.

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

A configurable & lightweight Vue wrapper component that enables
A configurable & lightweight Vue wrapper component that enables

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

Mention component for Vue.js
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 =

 🔍 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

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

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

Comments
  • Get rid of the clear option

    Get rid of the clear option

    This breaks some stuff and makes this component harder to maintain so, I'm going to rid of this for now until I can figure out a better way to integrate it.

    BTW this functionality was introduced here #24

    opened by DannyFeliz 0
Releases(v2.2.3)
  • v2.2.3(Jan 26, 2020)

    • Hotfix: remove extra space in the list 5ad993d
    • Merge pull request #26 from DannyFeliz/remove-clearable-option 03ae7b5
    • Remove unit test releated to clear prop 3e994dd
    • Get rid of the clear option bb142c5
    • Merge pull request #24 from Jeremy410/master f6fd9e3
    • Add more unit test for clearable field 9550a99
    • Replace setValue and nextTick with initialValue 11bdf1a
    • Fix documentation indentation 3bdd3b2
    • Update documentation [ci skip] 7ef1a79
    • Remove empty describe 97b16c1
    • Add unit test for clearable prop 4004b51
    • Fix unit test related to clearable prop 9bc2758
    • Feature: Add clear field 8549df9
    • removing @blur from merge conflict. 6909e58
    • Merge branch 'master' of https://github.com/Jeremy410/vue-email-dropdown 2fe4778
    • Merge branch 'master' into master 8956f7f
    • Removing showCleanButton from App.vue aebe89f
    • Changing X for &times (\00d7) 3e40451
    • Merge branch 'master' of https://github.com/Jeremy410/vue-email-dropdown into cleanup fb66f93
    • Merge branch 'fix-focus-index' of https://github.com/Jeremy410/vue-email-dropdown bc731fc
    • Merge pull request #25 from DannyFeliz/cleanup 5447063
    • Update unit test 578d509
    • Add style yo username and domain 4f56bfc
    • Clean up and renames 076e3ed
    • Don't sort default domains c70864f
    • Remove email-dropdown-item-focus class 68aa577
    • Add ellipsis to input when overflows d6bdef7
    • Update README.md 223e007
    • Update README.md fbe74ae
    • Update README.md 0d5c6e9
    • Update README.md a8c41b8
    • Adding button (x) for cleaning the text b408588
    • Add generate generate-build script b4b988b

    https://github.com/DannyFeliz/vue-email-dropdown/compare/v2.2.2...v2.2.3

    Source code(tar.gz)
    Source code(zip)
  • v2.2.2(Dec 5, 2019)

    Fix

    • Don't show the default domains with the regular domains efc5fca

    Other improvements

    • Add unit test to handle the suggestions without default domains 1512f20
    • Update generate-tag command 925dc82

    https://github.com/DannyFeliz/vue-email-dropdown/compare/v2.2.1...v2.2.2

    Source code(tar.gz)
    Source code(zip)
  • v2.2.1(Dec 5, 2019)

    Chore

    • Update image link f7e7874
    • Clean up 64121c6
    • Update demo gif 22bc0fd
    • Update core-js version 7ca0983

    https://github.com/DannyFeliz/vue-email-dropdown/compare/v2.2.0...v2.2.1

    Source code(tar.gz)
    Source code(zip)
  • v2.2.0(Dec 5, 2019)

    Feature

    • Hide the list by pressing Esc a4ff01a

    Fixes

    • Fix weird behavior by pressing tab f3448a0

    Other improvements

    • Add feature section 5eb1815

    https://github.com/DannyFeliz/vue-email-dropdown/compare/v2.1.0...v2.2.0

    Source code(tar.gz)
    Source code(zip)
  • v2.1.0(Dec 2, 2019)

    Features

    • Feature: Add inputClasses prop 9e70474

    Chore

    • Merge branch 'master' into feature-input-class 9d9c0c3
    • Update documentation for inputClasses ed94fa9
    • Merge pull request #18 from DannyFeliz/feature-bump-version 6829e98
    • Fix failing tests 5a25da5
    • Add padding left to list item a74316d
    • Update dependencies 80a67a3

    https://github.com/DannyFeliz/vue-email-dropdown/compare/v2.0.4...v2.1.0

    Source code(tar.gz)
    Source code(zip)
  • v2.0.4(Nov 19, 2019)

    • Add 'generate-tag' script efda896
    • Add generate generate-build script a8550b6
    • Fix the focus index when hiding the list (#17) a509b06
    • Fix the focus index when hidding the list 0eb6aac
    • Update run test documentation [ci skip] 1bf5438

    https://github.com/DannyFeliz/vue-email-dropdown/compare/v2.0.3...v2.0.4

    Source code(tar.gz)
    Source code(zip)
  • v2.0.3(Nov 17, 2019)

    • Update travis test script c51cfda
    • Update npm test script aa925ed
    • Add np dependency 8f5b313
    • Add computed properties unit test (#13) 408c2b3
    • Add computedProperty unit test 5c63398
    • Remove test for HelloWord 5c309dc
    • Remove HelloWord component f1c2a68
    • Rename fakeDomains -> suggestionList 1ecf890
    • Remove unnecessary validation check 80bc381
    • Remove redundant validation 94c677d
    • Add deep-equal-in-any-order dependency 639f3fa
    • Update travis ci badge 65d8a5d
    • Add os into travic ci config 10a33c2
    • Fix typo bf04978
    • Merge pull request #12 from DannyFeliz/feature-unit-test 4757025
    • Add tracis ci badge a884595
    • Add travis ci configuration file ccfcc79
    • Add unit test to EmailDropdown 7690a46
    • Remove InputEvent validation f299ee1
    • Add watch command cde03df

    https://github.com/DannyFeliz/vue-email-dropdown/compare/v2.0.2...v2.0.3

    Source code(tar.gz)
    Source code(zip)
  • v2.0.2(Nov 10, 2019)

    • Fix: support reactive intinial value dfa05eb
    • Fix: Ignore email casing 5d53cbb
    • Bump version 2.0.1 c6875f4

    https://github.com/DannyFeliz/vue-email-dropdown/compare/v1.0.5...v2.0.2

    Source code(tar.gz)
    Source code(zip)
  • v2.0.1(Nov 8, 2019)

    • Add .np-config back b896868
    • Remove .np-config.js d6aae26
    • Update .np-config.js 57dc2bb
    • Ad .np-config.js 331811f
    • Update README 9e77f19
    • Feature click outside and display suggestions list a floating ele… (#10) 339261c
    • Feature: Hide suggestion list on click outside 32adfc0
    • Add toggle of clickOutside 5fa08b4
    • Add closeOnClickOutside documentation 5db21f9
    • Add v-click-outside dependency 71fffa0
    • Format code (#7) f64e2ad
    • Remove duplicate hotmail.com domain d20ac86
    • Add prettier config file c952779
    • Format code and clean up c43f604
    • Only show domain list if has email (#6) 31a5ddf
    • Only show domain list if has email 618857e
    • Bump version 51d0d0e
    • Remove duplicated EmailDropdown declaration ffb1230
    • Bump version 8352f9c
    • Remove global param 1de0991
    • Fix typo e99d00c
    • Fix typo c4a13d2
    • Add contributing section 06fba0a
    • Bump version 5efe95b
    • Update git address c17dcb5
    • Add missing fields to package.json 260dedf
    • Add bundle command 0200254
    • Add prop documentation d9499ec
    • Add demo gif to README afcf54f
    • Add demo gif 478ae6b

    https://github.com/DannyFeliz/vue-email-dropdown/compare/d6b38f7c865dbdcf0988da10a9704cff72c63fc5...v1.0.5

    Source code(tar.gz)
    Source code(zip)
Owner
Danny Feliz
Senior Front-end Developer at @Truelogic. Previously @VivialPlatform and @mctekk.
Danny Feliz
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
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
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
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
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
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