HTML Academy · レッスン

オートコンプリートのためのDatalist

Q: 「オートコンプリートのためのDatalist」で何を学びますか？

datalist要素で入力値を候補として提示します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

datalist要素で入力値を候補として提示します

「オートコンプリートのためのDatalist」はCoddyKit上の無料HTML Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

datalistとは

<datalist>要素は、<input>にあらかじめ定義された候補のリストを提供します。

<label for="browser">Favorite browser</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>
<!-- list attribute links input to datalist by id -->
<!-- User can type freely OR select a suggestion -->

datalistとselectの比較

<datalist>と<select>の主な違いは次のとおりです。

datalist — 自由なテキスト入力と候補を組み合わせます（ユーザーは任意の文字を入力できます）
select — 選択肢を限定します（ユーザーはリストから選択する必要があります）

入力を制限せず、値を候補として提示したい場合はdatalistを使用します。

datalistとinputの関連付け

<input>のlist属性は、<datalist>のidと一致させる必要があります。

<input type="text" list="fruits" name="fruit">
<datalist id="fruits">
  <option value="Apple">
  <option value="Banana">
  <option value="Cherry">
</datalist>

異なるinputタイプでのdatalist

<datalist>は、多くのinputタイプで使用できます。

<!-- text + datalist: type-ahead suggestions -->
<input type="text" list="countries">

<!-- range + datalist: tick marks -->
<input type="range" min="0" max="100" step="10" list="marks">
<datalist id="marks">
  <option value="0">  <option value="25">
  <option value="50"> <option value="75"> <option value="100">
</datalist>

<!-- color + datalist: color palette shortcuts -->
<input type="color" list="brand-colors">
<datalist id="brand-colors">
  <option value="#0070f3">
  <option value="#e86f00">
</datalist>

datalistのoption label

datalist内のoptionには、表示用のlabelと送信用のvalueを設定できます。

<datalist id="countries">
  <option value="US">United States</option>
  <option value="GB">United Kingdom</option>
  <option value="DE">Germany</option>
</datalist>
<!-- In some browsers, label shows in dropdown
     value is submitted when the option is selected -->

候補のフィルタリング

ユーザーが入力すると、ブラウザが候補をフィルタリングします。

一致を判定するアルゴリズムはブラウザによって異なります
先頭から一致させるブラウザもあれば、文字列内のどこからでも一致させるブラウザもあります
ブラウザのフィルタリング動作を制御することはできません
カスタムフィルタリングには、ARIAを使用したカスタムautocompleteコンポーネントを構築します

JavaScriptによる動的なdatalist

datalistのoptionを動的に更新します。

<input type="text" list="suggestions" id="search-input">
<datalist id="suggestions"></datalist>

<script>
document.getElementById('search-input').addEventListener('input', async function() {
  const query = this.value;
  const res = await fetch(`/api/search?q=${query}`);
  const items = await res.json();

  const dl = document.getElementById('suggestions');
  dl.innerHTML = items.map(item =>
    `<option value="${item.name}">`
  ).join('');
});
</script>

datalistのアクセシビリティ

datalistのアクセシビリティに関する考慮事項です。

スクリーンリーダーは候補をlistboxとして読み上げます
ユーザーは矢印キーで候補を移動できます
inputは引き続き自由なテキストを受け付けるため、バリデーションで対応できるようにします

ブラウザ対応に関する注意点

datalistのブラウザ対応は良好ですが、いくつかの注意点があります。

Chrome、Edge、Firefox：完全に対応しています
Safari：Safari 12.1以降で対応しています
モバイルブラウザ：ほとんどで候補が表示されますが、UIは異なります
datalistに依存する前に、対象ブラウザで必ずテストします

datalistを使用しない場合

次のような場合、datalistは適していません。

厳密なバリデーションが必要な場合（ユーザーがリストから選択する必要がある場合）
optionのスタイルをカスタマイズする必要がある場合（見た目はブラウザが制御します）
グループ化が必要な場合（datalistではoptgroupがサポートされていません）

このような場合は、ARIAのrole="combobox"を使用したカスタムautocompleteコンポーネントを作成します。

datalistとsearch inputの比較

datalistとautocomplete付きのsearch inputを比較します。

<input type="search" name="q" list="search-suggestions">
<datalist id="search-suggestions">
  <option value="HTML tutorial">
  <option value="HTML forms">
  <option value="HTML accessibility">
</datalist>
<!-- type="search" provides search-specific UI on mobile -->
<!-- list attribute adds datalist suggestions to any input type -->

クイックチェック

inputを対応するdatalist要素に関連付けるには、どうすればよいですか？

まとめ：datalist

datalistの基本事項です。

<datalist id> + <input list> — idとlistを一致させて関連付けます
ユーザーは自由に入力することも、候補を選択することもできます
選択肢を限定する必要がある場合は<select>を使用します
text、range、colorなど、さまざまなinputタイプで使用できます
ユーザーの入力に合わせて候補がフィルタリングされます

よくある質問

「オートコンプリートのためのDatalist」レッスンは無料ですか？

はい。「オートコンプリートのためのDatalist」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「オートコンプリートのためのDatalist」で何を学びますか？

datalist要素で入力値を候補として提示しますブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「オートコンプリートのためのDatalist」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← HTML Academyに戻る