jQueryuiを用いてメールの入力補助(サジェスト)
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でjsonデータを処理(parseJSON)
他社が作成したシステムのちょっと改修案件があった。設置したもののどうも動かないと ...
-
-
NicEdit(WYSIWYGエディタ)とテキストエリアの切り替え
チェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とt ...
-
-
jQueryプラグインを作成する方法
jQueryのプラグインを作ってみたかった。 というのも大抵のものはググったらあ ...
-
-
スワイプ・フルスクリーン・サムネイル対応のjQuery画像ビューア
タブレット＆スマホでの閲覧が想定されているページで、スワイプ・サムネイル・フルス ...
-
-
bootstrap-datetimepickerについて
日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、 普通のセレクト ...
-
-
jQueryの指定されたイベントを実行する(trigger)
jQueryで $('ID').trigger('click'); というみたこ ...
-
-
jQueryのloadメソッドでファイル(ページ)を呼び出す
サイト内でヘッダーやフッター等共通のパーツはそれぞれ別ファイルに分けてPHPのi ...
-
-
jQueryでコンテンツのスライド
jQueryもしくはJavaScriptでリンクを押すと 右から左にコンテンツを ...
-
-
jQueryで高速化
高速化について調べる機会があったのでメモ。 ------ ・セレクタはclass ...
-
-
jQueryで画像(
タグ内)のsrc情報を取得する場合
すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...
- PREV
- 異なる文字コード間でform送信する
- NEXT
- MySQLでデータがあれば上書き、無ければ挿入する