lorem-co-ltd0本日は入力候補を自動補完させる検索バーの作り方を解説していきます。ライブラリやバックエンド言語が必要だと思われているかもしれませんが、基本的にはHTMLのみで実装できるので初学者の方やデザイナーの方でも作れちゃいます。いう細かい実装ができるようになるとWordPressの管理画面のカスタマイズまで手を出せるようになるのでチャレンジしてみましょう。動画もあるので必要に応じて活用してください。入力候補の自動補完ができる検索バーは以下のようなHTMLで作ることができます。</body></html>入力欄はInputで作っていて、こちらは特に困ることは無いと思います。ポイントとしてはdatalistの部分になります。datalistは画面に表示されない状態で、入力候補をHTMLで記載することができるタグです。入力候補はoptionタグを使ってvalue属性に設定します、セレクトボックスの作り方に似ています。これらにより画面上ではinputで作った入力欄のみが表示されていて、クリックするとdatalistで設定した入力候補が表示されます。途中まで入力した場合でも近しいキーワードがあれば入力候補を表示してくれます。datalistで選択した内容をJavaScriptで取得するそれではJavaScriptを使ってdatalistを使って自動補完した内容を取得してみます。取得した内容を画面上にも表示したいのでHTMLでpタグを用意しておきます。</body></html>続いてJavaScriptを書いていきます。value;});一点注意としてはdatalistのoptionのvalue属性を取得するわけでは無いことです。入力候補はdatalistのoptionで管理しているのものの、フォームとして表示するのは入力欄であるinputになるのでinputのvalue属性から値を取得します。HTML側で事前に用意していたpタグを使って選択した内容を画面に表示できていますね。要素の取得やフォームのコーディング自体については、別の記事で詳しく解説していますので初学者の方はぜひ目を通して見てください。csvデータ】HTMLを使ったフォームの作り方の基本についてまた今回参考にした本はこちらになります。良ければこちらからどうぞ。