(Sample)
今回は、HTMLのdatalist要素を使って入力候補（予測変換）を表示するフォームの作り方を丁寧に解説していきます。
「Googleの検索みたいに、文字を入力すると予測が出てくるアレ、どうやって作るの？」と思ったことはありませんか？
実は、それをたった数行のHTMLで実現できてしまうんです！
datalistってなに？
入力内容に合わせて候補を表示してくれるHTMLタグ
datalistは、ユーザーが入力中の内容に合う選択肢を、リアルタイムで表示してくれる仕組みを提供するHTML要素です。
<input type="text" list="example-list" />
<datalist id="example-list">
<option value="りんご" />
<option value="バナナ" />
<option value="みかん" />
</datalist>
このコードを使うと、テキストボックスに「り」などと入力したときに、「りんご」が候補として表示されるようになります。
datalistの構造を分解してみよう！
HTMLコードの関係性を理解する
| タグ | 用途 |
|---|---|
<input list="ID名"> | 候補を表示させたい入力欄 |
<datalist id="ID名"> | 候補リストを定義する部分 |
<option value="候補値" /> | 実際の選択肢（ひとつずつ） |
図にすると、以下のような関係です：
<input list="車の候補リスト"> → <datalist id="車の候補リスト"> → <option value="セダン">
↳ <option value="SUV">
↳ <option value="ハイブリッドカー">
今回のサンプルコードのポイント解説
以下のコードは、車の種類を入力するためのフォームに、datalistを使って入力候補を表示する例です。
入力欄とdatalistの関連付け
<input
type="text"
id="search"
list="car-types"
placeholder="検索..."
class="form-control mb-3"
/>
<datalist id="car-types">
<option value="セダン"></option>
<option value="SUV"></option>
<!-- さらに多数の選択肢 -->
</datalist>
このコードで注目すべき点：
inputのlist="car-types"により、id="car-types"のdatalistとつながるoptionタグで車の種類を登録しておけば、入力中に一致する候補が出る
ユーザー体験がアップする！
この機能を使うと、以下のようなメリットがあります：
| メリット | 解説 |
|---|---|
| 入力ミスの防止 | 候補から選ぶため、タイプミスや表記ゆれを防げる |
| 入力時間の短縮 | 候補をクリックするだけで入力できる |
| ユーザビリティの向上 | ユーザーが「何を入力すればいいか」がわかりやすくなる |
たとえば、「車」と入力すると「セダン」「スポーツカー」などが表示されます。まるで検索エンジンの予測変換みたいですね！
注意点とデメリットも知っておこう
| デメリット | 対処法 |
|---|---|
| スタイリングの自由度が低い | ブラウザ依存。完全なデザイン変更は困難 |
| モバイルでは非対応なこともある | 一部の古いスマホブラウザではうまく表示されない |
| JavaScriptとの連携が弱い | 候補の動的変更には工夫が必要 |
※より柔軟にカスタマイズしたい場合は、JavaScriptで独自にオートコンプリートを実装する必要があります。
まとめ：datalistはこんなときに使おう！
適しているケース：
- 入力値がある程度決まっているとき（車種、都道府県、職種など）
- JavaScriptを使わずに素早くUIを改善したいとき
- ユーザーに優しいインターフェースを作りたいとき
逆に「候補がAPIから取得される」「入力候補を頻繁に変える必要がある」といったケースでは、datalistよりもJavaScript（例：autocomplete.jsやjQuery UI Autocomplete）の方が適しています。
今後の学習のステップ
datalistの使い方をマスターしたら、次はこんなことに挑戦してみてください：
- JavaScriptを使って候補リストを動的に変更する方法
- サーバーから取得したデータを使ってオートコンプリートする技術（Ajax + JSON）
- UIライブラリ（ReactやVue）のコンポーネントでの活用方法
「簡単なHTMLでここまでできるのか！」という驚きを感じながら、一歩ずつレベルアップしていきましょう！