jQuery UIでテキストボックスにサジェスト(入力補助)機能を実装する方法
2024/05/24
メールアドレスを入力するためのテキストボックスに文字を入力すると「@yahoo.co.jp」「@google.com」のようにアットマーク以降の文字を簡単に選択できるようにしたい。つまりサジェスト(入力補助)機能を実装したい。jQuery UIを用いることで簡単に実装できたので以下にメモ。
リファレンス
https://jqueryui.com/autocomplete/
サンプル
https://taitan916.info/sample/autocomplete/
ソースコード
<input type="text" id="mail_id"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.3/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.3/themes/blitzer/jquery-ui.min.css"> <script> $(function () { $('#mail_id').on('keyup change keydown', function(){ let 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>
関連記事
-
-
Flashを用いずJavaScriptでコピー&カット機能を実装する方法
以前メモったようなFlashを用いる方法ではなく、WebAPIでコピー& ...
-
-
画像の登録フォームにてjQueryプラグイン(piCEdit)を用いてWebカメラの映像を撮影させる方法
form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...
-
-
JavaScript / jQueryでブラウザのウィンドウがアクティブかどうかを判別する方法
ある動画サイトを閲覧していた際にウィンドウが非アクティブになると視聴中の動画が止 ...
-
-
ラジオボタンのカスタムデータ属性を取得し、特定の値の場合はチェックさせない方法
ASPを使用したサイトで特定のradioボタンは選択不可にしたいというケースがあ ...
-
-
Dropzone.jsを使って画像をドラッグ&ドロップでアップロードする方法
画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にDro ...