email-autocomplete.jsを使ってメールアドレス入力時にドメインを入力補完する方法｜DAD UNION

jquery.email-autocomplete.jsを使ってメールアドレス入力項目の入力時にドメイン（@マーク以降）を入力補完する方法をご紹介します。
メールアドレス入力時に「@」マーク以降、以下（例）の様に自動的で入力補完してくれるjsプラグインです。

（例）

「g」を入力すると「gmail.com」
「h」を入力すると「yhotmail.com

Contents

メールアドレス入力項目の入力時にドメイン（@マーク以降）を入力補完するCSSの記述
jquery.email-autocomplete.jsを使ってメールアドレス入力項目の入力時にドメイン（@マーク以降）を入力補完するJavaScriptの記述
メールアドレス入力項目の入力時にドメイン（@マーク以降）を入力補完するHTMLの記述
pagePiling.jsを使ってスクロールでページ切替を行うデモページ
ソース元：email-autocomplete

メールアドレス入力項目の入力時にドメイン（@マーク以降）を入力補完するCSSの記述

※フォーム（form）のCSSを設定をします。必要に応じて変更して下さい。

<style type="text/css">
<!--
body{
  text-align: center;
  font-size: 16px;
}
h1{
  text-align: center;
  padding: 10px 0 0 0;
  font-size: 18px;
  font-weight: bold;
}
p{
  padding: 15px 0 25px 0;
}
form{
  width: 400px;
  margin: 0 auto;
}
-->
</style>

jquery.email-autocomplete.jsを使ってメールアドレス入力項目の入力時にドメイン（@マーク以降）を入力補完するJavaScriptの記述

※query.min.js、jquery.email-autocomplete.jsファイルを読み込みます。$(“テキストボックス”).emailautocomplete({補完したいドメインを追加})で（@マーク以降）を入力補完します。入力補完したいドメインは追加できます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="jquery.email-autocomplete.js"></script>
<script>
$(document).ready(function(){
  $(".email").emailautocomplete({
    domains: ["dad-union.com", "yahoo.co.jp"]
  });
});
</script>

メールアドレス入力項目の入力時にドメイン（@マーク以降）を入力補完するHTMLの記述

※ドメイン入力補完したいメールアドレス項目（class=”form-control email”）を用意します。必要に応じて変更して下さい。

<h1>メールアドレス入力項目の入力時にドメイン（@マーク以降）を入力補完します</h1>

<p>
以下の入力項目にメールアドレスを入力して下さい。<br>
@マーク以降に、
「g」を入力すると「gmail.com」<br>
「y」を入力すると「yahoo.co.jp」<br>
「d」を入力すると「dad-union.com」<br>
が自動的に入力補完されます。
</p>

<form role="form">
  <div class="form-group">
    <label for="email">メールアドレス</label>
    <input type="email" class="form-control email" id="email" placeholder="メールアドレスを入力">
  </div>
</form>