jQuery UI は電子メール入力プロンプトを実装します。

効果:

コードをコピー コードは次のとおりです:

使用インポートする Jquery UI、js、css:
rel= "スタイルシート" href="../demos.css">
< スクリプト src="../../ui/jquery.ui.core.js">
<スクリプト src="../../ui/jquery.ui.ウィジェット.js">
<スクリプト src="../../ui/jquery.ui.position.js">
<スクリプト src =" ../../ui/jquery.ui.autocomplete.js">

<script> var email=["163.com","yahoo .com ","yahoo.cn","126.com","sina.com"]; <br>$( function () { <br>//入力ボックスのイベントをバインドします<br>$( "# email" ).keyup( function(){ <br>emailInp(); <br>}); <br>}); <br>function emailiInp(){ <br>var arrs= new Array() <br> inpVal= $( "#email" ).val(); <br>//入力された値に基づいてドロップダウン リストを動的に作成します <br>$.each(emails, function (index,info){ <br> if (inpVal.indexOf("@" )==-1) <br>{ <br>//入力なし @ <br>arrs[index]=inpVal "@" info; else { <br> //入力 @ <br>arrs[index]=inpVal.substring(0,inpVal.indexOf( "@" )) "@" 情報 <br>} <br>}) <br>$( "#email" ).autocomplete( { <br>//バインド ドロップダウン リストの内容<br>source: ars <br>}) <br>} <br></script> 最後に、テキスト ボックス: