1. JSファイルが必要：jquery.Mailautocomplete-3.1.js
コードコピーは次のとおりです。
（function（$）{
$ .fn.mailautocomplete = function（options）{
var defaults = {
BoxClass：「MaillistBox」、//外部ボックススタイル
ListClass：「MaillistDefault」、//デフォルトリストスタイル
FocusClass：「MaillistFocus」、//リスト内のスタイルを選択します
MarkCalss：「Maillisthlignt」、//ハイライトスタイル
Zindex：1、
AutoClass：true、//独自のクラススタイルでプラグインを使用するかどうか
MailArr：["qq.com"、 "gmail.com"、 "126.com"、 "163.com"、 "hotmail.com"、 "yahoo.com"、 "yahoo.com.cn"、 "live。 com "、" sohu.com "、" sina.com "]、//電子メール配列
texthint：false、//テキストの自動表示と非表示
HintText： ""、
FocusColor： "＃333"、
Blurcolor： "＃999"
};
var settings = $ .extend（{}、defaults、options || {}）;
//ページCSSスタイルの読み込み
if（settings.autoclass && $（ "＃maillistappendcss"）。size（）=== 0）{
$（ '<style id = "maillistappendcss" type = "text/css">。maillistbox {border：1px solid＃369; background：#fff; font：12px/20px arial;}。mail listdefault {padding：0 5px;カーソル：ポインター;ホワイトスペース：nowrap;}。maillistfocus {padding：0 5px; cursor：pointer：nowrap; background：＃369; color：white;}。 maillisthlignt {color：#ffff;} </style> '）。appendto（$（ "head"））;
}
var cb = settings.boxclass、cl = settings.listclass、cf = settings.focusclass、cm = settings.markcalss;
var z = settings.zindex、newarr = mailarr = settings.mailarr、hint = settings.texthint、text = settings.hinttext、fc = settings.focuscolor、bc = settin gs.blurcolor;
//電子メールの内部リストコンテンツを作成します
$ .createhtml = function（str、arr、cur）{
var mailhtml = "";
if（$。ISARRAY（arr））{
$ .each（arr、function（i、n）{
if（i === cur）{
mailhtml+= '<div id = "maillist _'+i+'"> <span>'+str '</span>@'+arr [i]+'</div>';
}それ以外{
mailhtml+= '<div id = "maillist _'+i+'"> <span>'+str '</span>@'+arr [i]+'</div>';
}
}）;
}
mailhtmlを返します。
};
//いくつかのグローバル変数
var index = -1、s;
$（this）.each（function（）{
var that = $（this）、i = $（ "。justforjs"）。size（）;
if（i> 0）{// 1つのテキストボックスのみをバインドします
戻る;
}
var w = that.outerwidth（）、h = that.outerheight（）;
//スタイルの初期化
that.wrap（ '<span style = "display：inline-block; position：relative;"> </span>'）
.before（ '<div id = "maillistbox _'+i+'" style = "min-width：'+w+'px; _width：'+w+'px; position：absolute; left：-6000px; top：'+h+ 'px; z-index：'+z+'; "> </div>'）;
var x = $（ "＃maillistbox_" + i）、livevalue;
that.focus（function（）{
//親タグのレベル
$（this）.css（ "color"、fc）.parent（）。css（ "z-index"、z）;
//プロンプトテキストを表示して非表示にします
if（hint && text）{
var focus_v = $ .trim（$（this）.val（））;
if（focus_v === text）{
$（this）.val（ ""）;
}
}
//キーボードイベント
$（this）.keyup（function（e）{
s = v = $ .trim（$（this）.val（））;
if（/@/。TEST（v））{
s = v.replace（/@.*/、 ""）;
}
if（v.length> 0）{
//キーが上下キーの場合
if（e.keycode === 38）{
//上
if（index <= 0）{
index = newarr.length;
}
索引 - ;
} else if（e.keycode === 40）{
//下
if（index> = newarr.length -1）{
index = -1;
}
インデックス++;
} else if（e.keycode === 13）{
//入力
if（index> -1 && index <newarr.length）{
//現在アクティベーションリストがある場合
$（this）.val（$（ "＃maillist _"+index）.text（））;
}
}それ以外{
if（/@/。TEST（v））{
index = -1;
// @の後に値を取得します
// s = v.replace（/@.*/、 ""）;
//新しいマッチング配列を作成します
var site = v.replace（/.*@/、 ""）;
newarr = $ .map（mailarr、function（n）{
var reg = new regexp（site）;
if（reg.test（n））{
n;
}
}）;
}それ以外{
newarr = mailArr;
}
}
x.html（$。CreateHTML（s、newArr、index））。css（ "left"、0）;
if（e.keycode === 13）{
//入力
if（index> -1 && index <newarr.length）{
//現在アクティベーションリストがある場合
x.css（ "left"、 "-6000px"）;
}
}
}それ以外{
x.css（ "left"、 "-6000px"）;
}
}）。blur（function（）{
if（hint && text）{
var blur_v = $ .trim（$（this）.val（））;
if（blur_v === ""）{
$（this）.val（text）;
}
}
$（this）.css（ "color"、bc）.unbind（ "keyup"）。parent（）。css（ "z-index"、0）;
x.css（ "left"、 "-6000px"）;
}）;
//マウスはリストアイテムイベントを渡します
//マウスが通過します
$（ "。mailhover"）。live（ "mouseover"、function（）{
index = number（$（this）.attr（ "id"）。split（ "_"）[1]）;
LiveValue = $（ "＃maillist _"+index）.text（）;
x.children（ "。" + cf）.removeclass（cf）.addclass（cl）;
$（this）.addclass（cf）.removeclass（cl）;
}）;
}）;
x.bind（ "mousedown"、function（）{
that.val（livevalue）;
}）;
}）;
};
}）（jQuery）;
2.JQライブラリはもちろん不可欠なので、ここは省略されています
以下でテストしましょう
3。スタイルシート：
コードコピーは次のとおりです。
<style type = "text/css">
.out_box {border：solid #ccc;
.list_box {border-bottom：1px solid #eee：0 5px;}
.focus_box {background：＃f0f3f9;}
.mark_box {color：＃c00;}
</style>
4.テストコード
コードコピーは次のとおりです。
<p>カスタムクラスディスプレイ：<入力タイプ= "テキスト" id = "customtest" size = "28" /> < /p>
<Script src = "js/jquery-1.6.min.js" type = "text/javascript"> </scrip>
<Script src = "js/jquery.mailautocomplete-3.1.js" type = "text/javascript"> </script>
<script type = "text/javascript">
$（function（）{
$（ "＃customtest"）。mailautocomplete（{
BoxClass：「Out_box」、//外部ボックススタイル
listClass： "list_box"、//デフォルトリストスタイル
FocusClass： "Focus_box"、//リスト内のスタイルを選択します
MarkCalss： "mark_box"、//ハイライトスタイル
オートキャラス：偽、
Texthint：true、//プロンプトテキストは自動的に非表示になります
HintText：「メールアドレスを入力してください」
}）;
}）
</script>