HTML
datalistの候補が表示されない
input と datalist の紐付けが間違っている
こんな症状
datalistで候補リストを作ったのに、入力欄に候補が出ない。idの紐付けミスで起きるよ。
まず試す
input の list 属性の値と datalist の id 属性の値を完全に一致させる。
html
<input list="fruits">
<datalist id="fruits">
<option value="りんご">
</datalist>これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓list と id が違う（fruits と fruit など）
→ input の list と datalist の id を完全一致させる。 - ✓候補に何も出ない
→ datalist 内の option に value 属性を付ける。 - ✓一部ブラウザで出ない
→ 対応状況を確認する。基本は id 一致で表示される。
なぜ起きる？
inputのlist属性の値とdatalistのid属性の値が一致していないよ。この2つが一致して初めてブラウザが候補を表示するんだ。また、datalistをinputの外に置いても動くけど、idの不一致が最も多い原因だよ。
✕ エラーが起きるコード
<input list="fruits">
<datalist id="fruit">
<option value="りんご">
</datalist>
<!-- list="fruits" と id="fruit" が不一致 -->✓ 直したコード
<input list="fruits">
<datalist id="fruits">
<option value="りんご">
</datalist>
<!-- id を一致させる -->✅ 直ったか確認
入力欄をクリック・入力したときに候補リストが表示されればOK。
この解決法は役立ちましたか？
🔗 関連するエラー
- 画像が表示されない — 画像パスが間違っている
- 拡張子が表示されない（.html が見えない） — OS の設定で拡張子が非表示
- favicon（ファビコン）が表示されない — faviconのパス・形式・キャッシュの問題
- iframeが表示されない — 埋め込み先がiframeを拒否している
- videoタグで動画が再生されない — ファイルパスまたはフォーマットの問題
📖 この問題を学べるレッスン
✏️ 手を動かして練習
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説