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でコンテンツのスライド
jQueryもしくはJavaScriptでリンクを押すと 右から左にコンテンツを ...
-
-
tableのフィルター機能
jQueryのプラグインで簡単にフィルター機能が つけられたのでメモ。 ■必要な ...
-
-
画像の登録フォームにてjQueryプラグインを用いてWebカメラの映像を撮影させる方法
form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...
-
-
FullCalendarでtitle以外も表示させたい
FullCalendarでカレンダー内のイベントをクリックした際にtitle以外 ...
-
-
他サイトのRSS情報を画像付きで表示させる
WordPressでAというサイトを作成し、AのRSS情報をBというサイトでアイ ...
-
-
jQueryでshow/hideよりaddClass/removeClassの方が速い
diaplay:none/blockする際に最近はshow()/hide()を ...
-
-
IE11でフォーム送信時に二重登録される
Internet Explorer11でform送信時にデータが二重登録されると ...
-
-
グラフ表示ライブラリのamChartsがよさそう
どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...
-
-
imgタグとPHPでグラフ作成
プラグインやライブラリを使わずにグラフを作る 機会があったのでメモ。 ■サンプル ...
-
-
日付入力のテキストフォームにカレンダープラグインを導入
やりたかった事と制限は下記の通り。 ・日付入力のテキストフォームにカレンダープラ ...
- PREV
- 異なる文字コード間でform送信する
- NEXT
- MySQLでデータがあれば上書き、無ければ挿入する