jQueryuiを用いてメールの入力補助(サジェスト)
2014/05/23
autocompleteを用いた簡易なサジェストを見かけたのでメモ。
■ソース
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.js"></script>
<script>
$(function () {
$('#mail_id').bind('keyup change keydown', function(){
var address = [
"@yahoo.co.jp",
"@gmail.com",
"@hotmail.co.jp",
"@outlook.jp",
"@mail.goo.ne.jp",
"@livedoor.com",
"@hotmail.com",
"@ybb.ne.jp",
"@live.jp"
];
for (i = 0; i < address.length; i++) {
address[i] = address[i].split("@").join($(this).val()+"@");
if ($(this).val().indexOf("@") == -1) {
$(this).autocomplete({
source: address
});
}
}
});
});
</script>
<title>autocomplete</title>
</head>
<body>
<h1>autocomplete</h1>
<input type="text" id="mail_id">
</body>
</html>
■サンプル
http://taitan916.info/sample/autocomplete/
関連記事
Ajaxで画像のアップロード(jquery.upload)
業務中に画像の選択後、アップロードボタンを押して画像のアップ、 その後フォームの ...
YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法
以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...
adblock(広告削除)設定している場合はページを表示させない
iPhoneのSleipnirでネットをしていると「広告がブロックされたのでペー ...
formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)
フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...
ブラウザのSafariのみスクロール関連のイベントが発火しない場合の対応方法
jQueryで一定距離スクロールさせた場合に発火するイベントをプログラムしていた ...