HTML

📋 datalistの候補が表示されない

input と datalist の紐付けが間違っている

😰 こんな症状

datalistで候補リストを作ったのに、入力欄に候補が出ない。idの紐付けミスで起きるよ。

inputのlist属性の値とdatalistのid属性の値が一致していないよ。この2つが一致して初めてブラウザが候補を表示するんだ。また、datalistをinputの外に置いても動くけど、idの不一致が最も多い原因だよ。

<input list="fruits">
<datalist id="fruit">
  <option value="りんご">
</datalist>
<!-- list="fruits" と id="fruit" が不一致 -->

1. input の list 属性と datalist の id が完全に一致しているか確認する。 2. datalist 内の option に value 属性を付ける。 3. ブラウザの対応状況を確認する。

<input list="fruits">
<datalist id="fruits">
  <option value="りんご">
</datalist>
<!-- id を一致させる -->

この解決法は役立ちましたか？

🚀 HTMLコースで基礎を学ぼう！

エラーの原因を根本から理解するには、基礎を体系的に学ぶのが近道です。完全無料・登録不要。