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/
関連記事
-
jQueryにて複数のajax処理のレスポンスをまとめて表示する方法
同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...
-
jQueryの指定されたイベントを実行する(trigger)
jQueryで $('ID').trigger('click'); というみたこ ...
-
配列をjQueryで取り扱う
やりたかった事は、 ・テキストボックスが複数ある。そのページに送信するクエリによ ...
-
jQueryで指定した可変(レスポンシブ)要素のposition / width / heightを取得する方法
jQueryで指定した要素のposition(leftやtop) / width ...
-
JavaScriptで数値のカウントアップ及びカウントダウン
JavaScript(一部jQuery)で数値のカウントアップ及びカウントダウン ...