jQueryプラグイン「Email Autocomplete」を使って、メールアドレス入力を補助する方法
今回はjQueryプラグイン「Email Autocomplete」を使ってオートコンプリート機能を実装する方法を紹介します。
Contents
jQueryプラグイン「Email Autocomplete」を使って、メールアドレス入力を補助する方法
インストール方法
上記のリンクのページ、または、GitHubのページから書庫ファイルをダウンロードすることができます。

jQuery Script.netのページからだと「Download」ボタンを押すことで、書庫ファイルをダウンロードできます。
書庫ファイルを解凍すると以下のようなファイルが展開されます。

導入方法
JSファイルインクルード
まず、jQueryのライブラリを読み込んでください。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
次の「dist」の配下にある『jquery.email-autocomplete.js』(または『jquery.email-autocomplete.min.js』)というファイルを読み込んでください。
<script src="/assets/Simple-jQuery-Email-Autocomplete-Suggestion-Plugin/dist/jquery.email-autocomplete.js"></script>
Email Autocomplete初期化
最後の「Email Autocomplete」を初期化すれば、実装完了です。
<script>
(function($){
$(function() {
$(".email").emailautocomplete();
}(jQuery));
</script>
または、パラメータにオプションを指定して呼び出すこともできます。
<script>
(function($){
$(function() {
$(".email").emailautocomplete({
suggClass:'autoCompleteStyle'
,domains: ["yahoo.co.jp","gmail.com","docomo.ne.jp","au.com","softbank.ne.jp"]
});
});
}(jQuery));
</script>
サンプル
HTMLコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Tooltipster demo</title>
<style type="text/css">
.autoCompleteStyle{
color:blue;
font-style: italic;
}
</style>
</head>
<body>
<input type="email" class="email" id="txtEmail" placeholder="メールアドレスを入力してください" style="width:350px" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="/assets/Simple-jQuery-Email-Autocomplete-Suggestion-Plugin/dist/jquery.email-autocomplete.js"></script>
<script>
(function($){
$(function() {
$(".email").emailautocomplete({
suggClass:'autoCompleteStyle'
,domains: ["yahoo.co.jp","gmail.com","docomo.ne.jp","au.com","softbank.ne.jp"]
});
});
}(jQuery));
</script>
</body>
</html>
デモ
オプション
suggClass
サジェスト(候補)表示時に適応されるCSSクラスを指定できるオプションです。
デフォルトは「suggClass」になります。
Domains
アットマーク以降に表示されるドメイン候補を定義できるオプションです。
配列指定で複数のドメインを指定できます。
デフォルトは以下のドメインが定義されています。加えて、この「Domains」オプションに指定すれば、追加でドメインを設定できます。
- gmail.com
- googlemail.com
- yahoo.com
- yahoo.co.uk
- hotmail.com
- hotmail.co.uk
- live.com
- msn.com
- comcast.net
- sbcglobal.net
- verizon.net
- facebook.com
- outlook.com
- att.net
- gmx.com
- icloud.com
- me.com
- mac.com
- aol.com