過去バージョン

基本: datalist の書き方

都道府県:
  

ユーザがフォーカスすると候補リストが出ます。タイプを始めると部分一致でフィルタされます。option の value がそのまま入力欄に入ります。

label と value を分けて表示

ブラウザによって label の表示位置が違います（Chrome は右側、Firefox は下）。挙動の統一が難しいので慎重に。

各種 input type との組合せ

range のティック

動的に候補を生成（JavaScript）

const tags = ['javascript', 'java', 'python', 'php', 'rust', 'go', 'ruby'];

const dl = document.createElement('datalist');
dl.id = 'tag-list';
for (const t of tags) {
  const opt = document.createElement('option');
  opt.value = t;
  dl.appendChild(opt);
}
document.body.appendChild(dl);

document.querySelector('input[name=tag]').setAttribute('list', 'tag-list');

非同期検索（インクリメンタル）

サーバからリアルタイム取得する場合は、入力イベントで datalist を更新します。ただし datalist は内部でさらにブラウザがフィルタするため挙動が複雑になります:

const input = document.querySelector('input[name=q]');
const dl = document.getElementById('q-list');
let timer;

input.addEventListener('input', () => {
  clearTimeout(timer);
  timer = setTimeout(async () => {
    const q = input.value;
    if (!q) return;
    const res = await fetch(`/api/suggest?q=${encodeURIComponent(q)}`);
    const items = await res.json();
    dl.innerHTML = items.map(i => ``).join('');
  }, 200);  // ★ デバウンス
});

select との違い

リスト外入力を禁止したい

datalist は自由入力を許容する仕様です。「リストの値だけ受け付けたい」場合はJavaScript / pattern で追加検証が必要:

const allowed = ['北海道', '青森県', '岩手県' /* ... */];
const input = document.querySelector('input[name=pref]');

input.addEventListener('change', () => {
  if (!allowed.includes(input.value)) {
    input.setCustomValidity('リストから選択してください');
  } else {
    input.setCustomValidity('');
  }
});

または HTML の pattern 属性で正規表現制限（候補が少ない場合）:

アクセシビリティ

• ブラウザ標準実装なのでキーボード操作とスクリーンリーダー対応は自動。WAI-ARIA Combobox パターンとして読まれる
• iOS Safari と Android Chrome では実装が貧弱でホイール表示になることがある
• option 数が多いと（数百以上）遅くなるブラウザがある → 仮想化が無いため
• label 要素で input と関連付けすることは通常の input と同じく必須

モダンなオートコンプリート ライブラリ

UI を細かく制御したい場合は、WAI-ARIA Combobox を実装した React ライブラリを使うのが定石:

FAQ

Q: option の並び順は変えられる？
A: 不可。ブラウザは記述順で表示するのみ。アルファベット順にしたければ予めソートして書く。

Q: 候補の最大数は？
A: 仕様上は無制限。実際は数百で遅くなるブラウザあり。多い場合は非同期で動的生成 + 上位 20 件のみ提示する設計に。

Q: option を画像付きにしたい
A: datalist では不可。独自実装 or downshift 系ライブラリを使う。