勉強したことのメモ

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

jQuery UIでテキストボックスにサジェスト(入力補助)機能を実装する方法

   2024/05/24  jQuery JavaScript

メールアドレスを入力するためのテキストボックスに文字を入力すると「@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>

 - jQuery JavaScript

  関連記事

jQueryで後から追加した要素にhasClass / addClass / removeClassを使用した際の挙動

jQueryで後から追加した要素にhasClass / addClass / r ...

「slick」でarrows(次に進む・前に戻るボタン)を設定しても表示されない場合の対応方法

「slick」で画像スライダーを表示する際にarrows(次に進む・前に戻るボタ ...

Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)

やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定 ...

jQueryとCSSで指定したテキストに対してラインマーカーを引く方法

サイト内で強調したいテキストに対して蛍光ペンでマーカーを引くようなアニメーション ...

日付入力のテキストフォームにカレンダープラグインを導入

やりたかった事と制限は下記の通り。 ・日付入力のテキストフォームにカレンダープラ ...