jQuery

jQueryプラグイン「Email Autocomplete」を使って、メールアドレス入力を補助する方法

2022年4月22日 by single コメントはまだありません

今回はjQueryプラグイン「Email Autocomplete」を使ってオートコンプリート機能を実装する方法を紹介します。

Contents

1 jQueryプラグイン「Email Autocomplete」を使って、メールアドレス入力を補助する方法

jQueryプラグイン「Email Autocomplete」を使って、メールアドレス入力を補助する方法

Simple jQuery Email Autocomplete & Suggestion Plugin

インストール方法

上記のリンクのページ、または、GitHubのページから書庫ファイルをダウンロードすることができます。

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>