メールアドレス入力フォームにドメインのサジェスト機能をつける（2）

jQuery UIを利用して、@マーク以降のドメインをサジェストする方法です。

<form>
<input class="domain-autocomplete" id="demo" type="text" name="email" placeholder="メールアドレスを入力" />
</form>

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
$(function() {
    var availableTags = [
        "yahoo.co.jp",
        "gmail.com",
        "icloud.com",
        "ezweb.ne.jp",
        "softbank.ne.jp",
        "i.softbank.jp",
        "d.vodafone.ne.jp",
        "h.vodafone.ne.jp",
        "t.vodafone.ne.jp",
        "c.vodafone.ne.jp",
        "k.vodafone.ne.jp",
        "r.vodafone.ne.jp",
        "n.vodafone.ne.jp",
        "s.vodafone.ne.jp",
        "q.vodafone.ne.jp",
        "disney.ne.jp",
        "emnet.ne.jp",
        "wcm.ne.jp",
        "outlook.jp",
        "outlook.com",
        "hotmail.co.jp",
        "live.jp",
        "infoseek.jp",
        "excite.co.jp",
        "inter7.jp",
        "smoug.net",
        "aol.jp",
        "youngpostman.net",
        "tora.zzn.com",
        "zoho.com",
        "goo.jp",
        "mail.goo.ne.jp",
        "auone.jp",
        "livedoor.com"
    ];
    function extractLast( val ) {
        if (val.indexOf("@")!=-1){
            var tmp=val.split("@");
            console.log(tmp[tmp.length-1]);
            return tmp[tmp.length-1];
        }
        console.log("returning empty");
        return "";
    }

    $( ".domain-autocomplete" )
        // don't navigate away from the field on tab when selecting an item
        .bind( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                    $( this ).data( "autocomplete" ).menu.active ) {
                event.preventDefault();
            }
        })
        .autocomplete({
            minLength: 1,
            source: function( request, response ) {
                        var mail = extractLast(request.term);
                        if(mail.length<1){return;}
                        var matcher = new RegExp( "^" + mail, "i" );
                        response( $.grep( availableTags, function( item ){
                            return matcher.test( item );
                        }));
             },
            focus: function() {
                // prevent value inserted on focus
                return false;
            },

            select: function( event, ui ) {
    this.value = this.value.substring(0, this.value.indexOf('@') + 1) + ui.item.value;
    return false;
}
        });
});
</script>

前回：メールアドレス入力フォームにドメインのサジェスト機能をつけるの方法では候補のドメインを下矢印キー（↓）で選択することができませんでしたが、こちらは矢印キーでも選択が可能です。

ただ今回のものはフォーム自体のオートコンプリート機能がオフになるため、新規登録フォームには有効ですが、ログインフォームには向いていないと思います。前回の方法はオートコンプリート機能をオフにする必要なく利用できるため、どのような目的で実装するかによって使い分けたいですね。