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

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

サンプルコード

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

HTML

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

JavaScript

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

<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

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で@以降何文字目から入力補完を表示するかが設定できます。
プラグイン化後のデモページ
　

【参考サイト】

• 携帯電話・PHS各社のドメイン一覧 | お知らせ | NTTドコモ
• フリーメールサービス – Wikipedia