メールアドレス入力時に、ドメインを自動で補完する

2015.11.22

jQuery UIのautocompleteを使って、メールアドレス入力時にドメインを自動補完する機能を作ってみます。

サンプルコード

ドメインのリストは適当に作成しているので、実際に使用する場合はdomainDataの内容を適宜変更してください。

HTML

1
2
<label>メールアドレス</label>
<input type="text" id="email">

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
var domainData = [
    'docomo.ne.jp',
    'mopera.net',
～略～
    'mail.goo.ne.jp',
    'inter7.jp'
];
 
var supportInput = '#email'; // autocompleteを適用する要素
var domains = []; // @より前を含めたドメインリストを格納
var currentVal; // 入力している内容を取得
var atindex = 0; // @より前の文字数取得
var mailname; // @より前の文字列取得
var autocompleteFlag = false; // autocompleteが構築されているかの管理
var minDomain = 1; // @以降何文字目まで入力で入力補完を表示するか
 
$(function() {
    $(supportInput).on('keyup', function() {
        currentVal = $(supportInput).val();
        // @が含まれている場合
        if(currentVal.match(/@/)) {
            // @を追加してすぐの場合
            if(!autocompleteFlag) {
                autocompleteFlag = true;
                // autocompleteの構築
                autocompleteSet(supportInput);
 
            // @が追加されて2回目以降の場合
            } else {
                // @より前半が変更された場合
                if(currentVal.indexOf('@') != atindex) {
                    // autocompleteを一旦破棄して再構築
                    $(supportInput).autocomplete('destroy');
                    autocompleteSet(supportInput);
                }
            }
 
        // @が含まれていない場合
        } else {
            // @が削除されてすぐのとき
            if(autocompleteFlag) {
                autocompleteFlag = false;
                // autocompleteの破棄
                $(supportInput).autocomplete('destroy');
            }
        }
    });
});
 
function autocompleteSet(target) {
    // @より前の文字数と文字列取得
    atindex = currentVal.indexOf('@');
    mailname = currentVal.slice(0, atindex);
    // @より前を含めたドメインリストの作成
    for (var i = 0; i < domainData.length; i++) {
        domains[i] = mailname + '@' + domainData[i];
    };
 
    // autocompleteの構築
    $(target).autocomplete({
        source: domains,
        minLength: atindex + 1 + minDomain
    });
}

ドメインを自動で補完するデモページ

入力内容に「@」が含まれた時点でautocompleteの構築を行っています。
入力補完に使用するデータは入力内容と一致する必要がある(ドメインだけでなく、@以前の文字列も必要)ので、autocompleteの構築時に入力補完のデータを作成しています。
　

プラグイン化

今のままだと同じページ内で複数使えませんので、プラグイン化してみます。
プラグイン化した「mailcomplete.js」はこちら

HTML

1
2
3
4
5
6
7
8
<div class="form-item">
    <label>メールアドレス</label>
    <input type="text" id="email">
</div>
<div class="form-item">
    <label>メールアドレス(確認)</label>
    <input type="text" id="email-confirm">
</div>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var domainData = [
    'docomo.ne.jp',
    'mopera.net',
～略～
    'mail.goo.ne.jp',
    'inter7.jp'
];
$(function(){
    $('#email').mailcomplete();
    $('#email-confirm').mailcomplete({
        source: domainData,
        minDomain: 2
    });
});

オプションとして、sourceでドメインの入力補完で使用するデータの定義、minDomainで@以降何文字目から入力補完を表示するかが設定できます。
プラグイン化後のデモページ
　

【参考サイト】

　

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年3月
日 月 火 水 木 金 土
 1
2345678
9101112131415
16171819202122
23242526272829
3031