フォームのメールアドレス入力欄に補完機能をつける

10月に入ってから急に寒くなってきましたね、体調管理には気をつけていきましょう。

さて今回はフォームのメールアドレス入力欄に補完機能をつけるjQueryプラグイン「email-autocomplete」を紹介したいと思います。

では早速実装していきます。

まずは以下からプラグインをダウンロードしましょう。

→github

HTML内に以下のようにスクリプト部分を記述します。

■スクリプト部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.email-autocomplete.js"></script>
<script>
$(document).ready(function(){
	$(".email").emailautocomplete({ //補完機能をつけたい箇所を指定
		domains: ["abc.com", "def.com"] //補完機能に追加したいドメインを記述
	});
});
</script>

■HTMLフォーム部分

<input class="email" name="email" type="email">

必要な記述はこれだけです。

→作成したDEMOはこちら

試しに「@a」まで入力してみると「@abc.com」が出てきますね。

配布元にその他のオプションや、デフォルトで用意されている補完機能のドメインが記載されていますので足りないものはこちらで用意してあげましょう。

これだけでもメールアドレスの入力がかなり楽になりますね。

ドメインを細かく覚えてない人も多いと思うので是非導入してみてはいかがでしょうか。

以上、クリエイターズメモでした。