キーテイクアウト

`要素は、javascriptに頼らずにオートコンプリートフォームコントロール用の軽量でアクセス可能な、クロスブラウザーソリューションを提供します。
• `ブラウザのサポート `
`のサポートは、インターネットエクスプローラー10および11を含む最新のブラウザでは堅牢であり、「
• `とテキスト入力」の組み合わせを使用して、古いブラウザでフォールバックオプションを使用できます。 ??> ``要素はCSSで直接スタイルすることはできません。これにより、カスタマイズが制限されますが、さまざまなブラウザーとプラットフォーム間で一貫性が保証されます。 AJAXなどの強化は、ユーザー入力に基づいてオプションを動的に設(shè)定し、リアルタイムのデータフィードバックを必要とするアプリケーションでの機能の改善とユーザーエクスペリエンスに基づいて動的に設(shè)定することができます。
• ？HTML5 コントロールは、ユーザーに小さな範(fàn)囲のオプションから選択したい場合に理想的です。
國や仕事の稱號など、たくさんのオプションがあります
• 明らかなソリューションは、オートコンプリート制御です。これにより、ユーザーはいくつかの文字を入力できます。これにより、より迅速な選択に使用できるオプションが制限されます。 開発者は、多くのJavaScriptを搭載したソリューションの1つに頼ることがよくありますが、カスタムオートコンプリートコントロールは必ずしも必要ではありません。 HTML5

200を超えるオプションを含むリストからあなたの國を選ぶことは、オートコンプリート制御の理想的な候補です。 HTMLページで直接、すべての國の子要素を使用して

DatalistのIDは、任意のフィールドのリスト屬性で參照できます：

• 紛らわしいことに、AutoComplete = "Off"を設(shè)定するのが最善です。これにより、ユーザーが
結(jié)果：

• 

  これは、Microsoft Edgeでのデフォルトのレンダリングです。他のアプリケーションは同様の機能を?qū)g裝しますが、ルックはプラットフォームとブラウザ間で異なります。

  options
  ラベルをテキストチャイルドとして使用するの子供は一般的です：

  <span><span><span><datalist</span> id<span>="countrydata"</span>></span>
  </span>  <span><span><span><option</span>></span>Afghanistan<span><span></option</span>></span>
  </span>  <span><span><span><option</span>></span>?land Islands<span><span></option</span>></span>
  </span>  <span><span><span><option</span>></span>Albania<span><span></option</span>></span>
  </span>  <span><span><span><option</span>></span>Algeria<span><span></option</span>></span>
  </span>  <span><span><span><option</span>></span>American Samoa<span><span></option</span>></span>
  </span>  <span><span><span><option</span>></span>Andorra<span><span></option</span>></span>
  </span>  <span><span><span><option</span>></span>Angola<span><span></option</span>></span>
  </span>  <span><span><span><option</span>></span>Anguilla<span><span></option</span>></span>
  </span>  <span><span><span><option</span>></span>Antarctica<span><span></option</span>></span>
  </span>  ...etc...
  <span><span><span></datalist</span>></span>
  </span>

  値屬性を使用すると、同一の結(jié)果が生成されます：

  <span><span><span><label</span> for<span>="country"</span>></span>country<span><span></label</span>></span>
  </span>
  <span><span><span><input</span> type<span>="text"</span>
  </span></span><span>  <span>list<span>="countrydata"</span>
  </span></span><span>  <span>id<span>="country"</span> name<span>="country"</span>
  </span></span><span>  <span>size<span>="50"</span>
  </span></span><span>  <span>autocomplete<span>="off"</span> /></span>
  </span>

  注：クロージング />スラッシュはHTML5ではオプションですが、コーディングエラーを防ぐのに役立つ可能性があります。 次の形式のいずれかを使用して、選択したラベルに従って値を設(shè)定することもできます。 オプション1：

  オプション2：
  どちらの場合も、有効なオプションが選択されている場合、入力フィールドは1、2、または3に設(shè)定されますが、UIはブラウザによって異なります。

  <span><span><span><datalist</span> id<span>="mylist"</span>></span>
  </span>  <span><span><span><option</span>></span>label one<span><span></option</span>></span>
  </span>  <span><span><span><option</span>></span>label two<span><span></option</span>></span>
  </span>  <span><span><span><option</span>></span>label three<span><span></option</span>></span>
  </span><span><span><span></datalist</span>></span>
  </span>

  Chromeには、値とラベルの両方を含むリストが表示されます。オプションが選択されると、値は殘ります。

  <span><span><span><datalist</span> id<span>="mylist"</span>></span>
  </span>  <span><span><span><option</span> value<span>="label one"</span> /></span>
  </span>  <span><span><span><option</span> value<span>="label two"</span> /></span>
  </span>  <span><span><span><option</span> value<span>="label three"</span> /></span>
  </span><span><span><span></datalist</span>></span>
  </span>

  Firefoxには、ラベルのみのリストが表示されます。オプションが選択されると、値に切り替わります。

  エッジには値のみが表示されます。

  • 次のCodepenの例は、すべてのバリエーションを示しています：
  を參照してください
  • html5
  by sitepoint（@sitepoint）によるオートコンプリートの例。
  実裝は進化しますが、今のところ、ユーザーを混亂させる可能性が高いため、値とラベルを使用しないことをお勧めします。

  （回避策については以下で説明します。）