勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQueryuiを用いてメールの入力補助(サジェスト)

   2014/05/23  jQuery

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で画像のアップロード(jquery.upload)

業務中に画像の選択後、アップロードボタンを押して画像のアップ、 その後フォームの ...

YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法

以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...

adblock(広告削除)設定している場合はページを表示させない

iPhoneのSleipnirでネットをしていると「広告がブロックされたのでペー ...

formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)

フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...

ブラウザのSafariのみスクロール関連のイベントが発火しない場合の対応方法

jQueryで一定距離スクロールさせた場合に発火するイベントをプログラムしていた ...