javascript オートコンプリートを設定する

javascript オートコンプリートを設定する

javascriptで、html5のautocomplete属性をonにしてdatalist要素に対してoptionを生成してオートコンプリートを設定するサンプルコードを記述してます。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105

datalistタグ使い方

datalistタグを使うと、オートコンプリートを設定することができます。

実行結果

サンプルコード

以下は、オートコンプリートの中を配列で作成して、datalistに適応するサンプルコードとなります。

※cssには「bootstrap material」を使用してます。

オートコンプリートが作成できていることが確認できます。