このチュートリアルでは、使用されていないHTML5 要素に深く掘り下げます。 JavaScriptを必要としない軽量でアクセス可能なクロスブラウザーオートコンプリートフォームコントロールを実装できます。 キーテイクアウト html5 ``要素は、javascriptに頼らずにオートコンプリートフォームコントロール用の軽量でアクセス可能な、クロスブラウザーソリューションを提供します。 ``とは異なり、 ``は多数のオプションを処理するためにより実用的であり、ユーザーが事前定義されたオプションにリストされていないカスタム値を入力できるようにします。 ブラウザのサポート ``のサポートは、インターネットエクスプローラー10および11を含む最新のブラウザでは堅牢であり、「 `とテキスト入力」の組み合わせを使用して、古いブラウザでフォールバックオプションを使用できます。 🎜> ``要素はCSSで直接スタイルすることはできません。これにより、カスタマイズが制限されますが、さまざまなブラウザーとプラットフォーム間で一貫性が保証されます。 AJAXなどの強化は、ユーザー入力に基づいてオプションを動的に設定し、リアルタイムのデータフィードバックを必要とするアプリケーションでの機能の改善とユーザーエクスペリエンスに基づいて動的に設定することができます。 ？の何が問題になっていますか HTML5 コントロールは、ユーザーに小さな範囲のオプションから選択したい場合に理想的です。 国や仕事の称号など、たくさんのオプションがあります ユーザーは、リストにない独自のオプションを入力したい 明らかなソリューションは、オートコンプリート制御です。これにより、ユーザーはいくつかの文字を入力できます。これにより、より迅速な選択に使用できるオプションが制限されます。 タイピングを開始すると、適切な場所にジャンプしますが、それは必ずしも明らかではありません。すべてのデバイス（タッチスクリーンなど）では機能せず、1〜2秒以内にリセットします。 開発者は、多くのJavaScriptを搭載したソリューションの1つに頼ることがよくありますが、カスタムオートコンプリートコントロールは必ずしも必要ではありません。 HTML5 要素は軽量でアクセス可能で、JavaScriptの依存関係はありません。バギーやサポートがないと聞いたことがあるかもしれません。それは2021年には真実ではありませんが、ブラウザの矛盾と警告があります。 クイックスタート 200を超えるオプションを含むリストからあなたの国を選ぶことは、オートコンプリート制御の理想的な候補です。 HTMLページで直接、すべての国の子要素を使用してを定義します。 DatalistのIDは、任意のフィールドのリスト属性で参照できます： 紛らわしいことに、AutoComplete = "Off"を設定するのが最善です。これにより、ユーザーがに値が表示されるようにしますが、以前にブラウザに入力した値ではありません。 結果： これは、Microsoft Edgeでのデフォルトのレンダリングです。他のアプリケーションは同様の機能を実装しますが、ルックはプラットフォームとブラウザ間で異なります。 options ラベルをテキストチャイルドとして使用するの子供は一般的です： id="countrydata"> >Afghanistan> >Åland Islands> >Albania> >Algeria> >American Samoa> >Andorra> >Angola> >Anguilla> >Antarctica> ...etc... > ログイン後にコピーログイン後にコピーログイン後にコピーログイン後にコピー値属性を使用すると、同一の結果が生成されます： for="country">country> type="text" list="countrydata" id="country" name="country" size="50" autocomplete="off" /> ログイン後にコピーログイン後にコピーログイン後にコピー 注：クロージング />スラッシュはHTML5ではオプションですが、コーディングエラーを防ぐのに役立つ可能性があります。 次の形式のいずれかを使用して、選択したラベルに従って値を設定することもできます。 オプション1： オプション2： どちらの場合も、有効なオプションが選択されている場合、入力フィールドは1、2、または3に設定されますが、UIはブラウザによって異なります。 id="mylist"> >label one> >label two> >label three> > ログイン後にコピーログイン後にコピー Chromeには、値とラベルの両方を含むリストが表示されます。オプションが選択されると、値は残ります。 id="mylist"> value="label one" /> value="label two" /> value="label three" /> > ログイン後にコピーログイン後にコピーFirefoxには、ラベルのみのリストが表示されます。オプションが選択されると、値に切り替わります。 エッジには値のみが表示されます。 次のCodepenの例は、すべてのバリエーションを示しています： を参照してくださいhtml5 codepen on sitepoint（@sitepoint） by sitepoint（@sitepoint）によるオートコンプリートの例。 実装は進化しますが、今のところ、ユーザーを混乱させる可能性が高いため、値とラベルを使用しないことをお勧めします。 （回避策については以下で説明します。） ブラウザのサポートとフォールバック 要素は、最新のブラウザーやインターネットエクスプローラー10および11でよくサポートされています： いくつかの実装ノートがありますが、それらはほとんどの使用に影響しません。起こりうる最悪の事態は、フィールドが標準のテキスト入力に戻ることです。 IE9以下を絶対にサポートする必要がある場合、が失敗したときにテキスト入力と組み合わせて標準を使用するフォールバックパターンがあります。国の適応例： id="countrydata"> >Afghanistan> >Åland Islands> >Albania> >Algeria> >American Samoa> >Andorra> >Angola> >Anguilla> >Antarctica> ...etc... > ログイン後にコピーログイン後にコピーログイン後にコピーログイン後にコピー を参照してくださいhtml5 codepenでautocompleteフォールバック（@sitepoint） 最新のブラウザでは、要素がの一部になり、 "またはother”ラベルは表示されません。上記の例と同じように見えますが、CountrySelectフォーム値は空の文字列に設定されます。 IE9以下では、（非常に長い）とテキスト入力フィールドの両方がアクティブです。 両方の値を古いIESで入力できます。アプリケーションは次のいずれかです 最も有効なもの、またはを決定します 小さなJavaScript関数を使用して、他方が変更されたときに一方をリセットします 非テキストコントロールでを使用してを使用します Chromeベースのブラウザは、値を に適用することもできます 「日付」のタイプの入力。ユーザーは、yyyy-mm-dd値として定義されているさまざまなオプションから選択できますが、ロケール形式で表示されます。 「色」のタイプの入力。ユーザーは、6桁の16進値として定義されたカラーオプションの選択から選択できます（3桁の値は機能しません）。 「範囲」のタイプの入力。スライダーはティックマークを表示しますが、これは入力できる値を制限していません。 codepen。 cssスタイリング スタイリングA ボックスに苦労したことがある場合は、…簡単でした！ an は通常どおりスタイルを整えることができますが、リンクされたとその子要素はCSSではスタイリングできません。リストレンダリングは、プラットフォームとブラウザによって完全に決定されます。 この状況が改善することを願っていますが、今のところ、MDNで解決策が提案されています。 デフォルトのブラウザの動作をオーバーライドします をのように効果的に扱うので、css でスタイリングできます JavaScript のすべてのオートコンプリート機能を複製します さらに強化し、コードはGitHubで利用できます。それを使用するには、HTMLページのどこにでもES6モジュールとしてスクリプトをロードします。 JSDELIVR CDN URLを使用できます： id="countrydata"> >Afghanistan> >Åland Islands> >Albania> >Algeria> >American Samoa> >Andorra> >Angola> >Anguilla> >Antarctica> ...etc... > ログイン後にコピーログイン後にコピーログイン後にコピーログイン後にコピー バンドラーを使用している場合は、またはnpmでインストールできます： for="country">country> type="text" list="countrydata" id="country" name="country" size="50" autocomplete="off" /> ログイン後にコピーログイン後にコピーログイン後にコピー 要素は、 value 形式を使用する必要があります。たとえば、 id="mylist"> >label one> >label two> >label three> > ログイン後にコピーログイン後にコピー 注：は使用できません。 cssを追加して、および要素をスタイリングできます。たとえば、 例： id="mylist"> value="label one" /> value="label two" /> value="label three" /> > ログイン後にコピーログイン後にコピー を参照してくださいhtml5 autocomplete css styling by sitepoint（@sitepoint）codepen。 スタイリングは機能しますが、努力する価値はありますか？ 私は… ではないと思う ブラウザの標準キーボード、マウス、およびタッチコントロールを合理的なアクセシビリティで再実装することは困難です。 MDNの例はキーボードイベントをサポートしていません。改善しようとしている間、必然的に一部のデバイスに問題があります。 CSSの問題を解決するために200行のJavaScriptに依存しています。それは1.5kbに最小化されますが、同じページに多くの長い要素が必要な場合、パフォーマンスの問題を導入することができます。 JavaScriptが要件である場合、よりきれいで、より一貫した、バトルテストされたJavaScriptコンポーネントを使用することが望ましいでしょうか？ コントロールは、JavaScriptが失敗したときにスタイリングなしで標準のHTML5 に戻りますが、それはわずかな利点です。 ajaxで強化された を作成します デザイナーがブラウザのスタイリングの違いを喜んで受け入れることを喜んでいると思います。JavaScriptを使用して標準機能を強化することができます。たとえば、 。 set ajaxによって返されたデータからの要素は、APIを検索するために呼び出します。 オプションが選択されている場合、その他のフィールド値を設定します。たとえば、「アメリカ合衆国」を選択すると、隠された入力に「私たち」を設定します。 コードは主に要素を再定義する必要がありますが、いくつかのコーディングの考慮事項があります。 Ajax APIリクエストは、最小数の文字が入力された後にのみ発生する必要があります。 イベントの入力は、 にdebountする必要があります。つまり、Ajaxの呼び出しは、ユーザーが少なくとも0.5秒間タイピングを停止した場合にのみトリガーされます。 クエリの結果をキャッシュする必要があるため、同一の呼び出しを繰り返したり解析する必要はありません。 不必要なクエリを避ける必要があります。たとえば、入力「un "は12か国を返します。さらにajaxの呼び出しを行う必要はありません。 このために標準のWebコンポーネントを作成しましたが、コードはGitHubで使用できます。以下のCodepenの例では、少なくとも2つの文字を入力した後、有効な国を選択できます。音楽アーティストのオートコンプリートは、検索文字列に一致する名前でその国を起源としたアーティストを返します： 国のルックアップAPIは、retscountries.eu。によって提供されます 音楽アーティストルックアップAPIは、musicbrainz.org。 によって提供されます 独自のアプリケーションで使用するには、HTMLページのどこにでもES6モジュールとしてスクリプトをロードします。 JSDELIVR CDN URLを使用できます： バンドラーを使用している場合は、またはnpmでインストールできます： データエントリフィールドとして使用する子供をを使用して要素を作成します。たとえば、Country Lookupはこれを使用しています： 要素属性： 属性 説明 API REST API URL（必須） resultData 返されたAPI JSONの結果配列を含むプロパティの名前（結果のみが返された場合は必須ではありません） resultName 検索入力に一致し、datalist 要素に使用される各結果オブジェクトのプロパティの名前（必須） Querymin 検索の前に入力する最小文字の数がトリガーされます（デフォルト：1） inputdelay 検索が発生する前にキープレス間でミリ秒で待つ最低時間（デフォルトのデバウンス：300） OptionMax 表示するオートコンプリートオプションの最大数（デフォルト：20） 有効 設定すると、このエラーメッセージが無効な値が選択されたときに表示されます REST URLには、少なくとも1つの$ {ID}識別子が含まれている必要があります。これは、そのIDを使用してに設定された値によって置き換えられます。上記の例では、API URLの$ {国}は、「国」のIDがある子の値を参照しています。 URLは通常、子の入力を使用しますが、ページ上の他のフィールドを参照できます。 RESTCountries.EU APIは、国データを含む単一のオブジェクトまたはオブジェクトの配列を返します。たとえば、 id="countrydata"> >Afghanistan> >Åland Islands> >Albania> >Algeria> >American Samoa> >Andorra> >Angola> >Anguilla> >Antarctica> ...etc... > ログイン後にコピーログイン後にコピーログイン後にコピーログイン後にコピーresultData属性は、これが返される唯一のデータであるため、設定する必要はありません（ラッパーオブジェクトはありません）。そのプロパティは、Datalist 要素を入力するために使用されるため、resultName属性を「名前」に設定する必要があります。 オプションが選択されている場合、他のフィールドを自動充填できます。次の入力は、データ自動充填属性が設定されているため、「Alpha2Code」および「region」プロパティデータを受け取ります。 DataList-Ajaxの仕組み for="country">country> type="text" list="countrydata" id="country" name="country" size="50" autocomplete="off" /> ログイン後にコピーログイン後にコピーログイン後にコピー 230行のコードを読み、魔法を生かし続けたい場合は、このセクションをスキップできます！ コードは、最初に内に新しいを作成します。これは、リスト属性を使用して子に添付します。入力イベントハンドラーはを監視し、最小数の文字が入力されていて、ユーザーがまだ入力していない場合にrunquery（）関数を呼び出します。 runquery（）は、フォームのデータからAPI URLを構築し、Fetch APIを使用してAJAXコールを作成します。返されたJSONは解析され、その後、要素を含む再利用可能なDOMフラグメントが構築され、キャッシュに配置されます。 datalistupdate（）関数が呼び出され、適切なキャッシュドムフラグメントでを更新します。 runqueryへのさらなる呼び出し（）ajax通話を避けてくださいクエリが既にキャッシュされている場合、または以前のクエリを使用できる場合。変更イベントハンドラーもを監視します。これは、フィールドからフォーカスが移動され、値が変更されたときにトリガーされます。関数は、値が既知のオプションと一致することをチェックし、必要に応じて制約検証APIを使用して、有効な属性で提供されたエラーメッセージを表示します。 有効なオプションが選択されていると仮定すると、変更ハンドラー関数はすべてのフィールドに一致するデータ自動制限属性を浸透させます。自動充填フィールドへの参照が保持されるため、無効なオプションがその後入力された場合にリセットできます。 シャドウdomは が使用されていないことに注意してください。これにより、Auto Complete （および）要素がCSSによってスタイルされ、必要に応じて他のスクリプトでアクセスできるようになります。 dunkin ’ HTML5 には制限がありますが、単純なフレームワークに依存しない自動コンプリートフィールドが必要な場合は理想的です。 CSSサポートの欠如は残念ですが、ブラウザベンダーは最終的にその監視に対処する可能性があります。 このチュートリアルに示されているコードと例は、自分のプロジェクトに採用できます。 HTML5 Datalistを使用した軽量オートコンプリートコントロールに関するFAQ HTML5 Datalist要素とは何ですか？また、どのように機能しますか？HTML5 Datalist要素は、入力要素のオプションの事前に定義されたリストです。フォーム要素の「オートコンプリート」機能を提供します。 Datalist要素は、ID属性を使用して、特定の入力要素に関連付けます。入力要素は、リスト属性を使用してデータリストを識別します。データリストの内部では、入力フィールドの利用可能なオプションを表すオプション要素を定義できます。データリストを入力フィールドに関連付ける必要があります。これは、リスト属性を入力フィールドに追加し、データリストのIDにその値を設定することによって行われます。ブラウザは、ユーザーの入力とDatalistの定義されたオプションに基づいてオートコンプリートオプションを提案します。 Chrome、Firefox、Safari、Edgeなどのほとんどの最新のブラウザ。ただし、Internet Explorer 9以前のバージョンではサポートされていません。現在のブラウザの互換性をWebサイトで確認できます。ドロップダウンリストの外観はブラウザによって制御され、CSSで簡単にカスタマイズすることはできません。ただし、データリストに関連付けられた入力フィールドをスタイリングできます。単一の入力フィールドに複数のデータリストを使用できますか？ いいえ、複数のデータリストを単一の入力フィールドに関連付けることはできません。入力フィールドのリスト属性は、1つのデータリストに対応するIDのみを取得できます。複数のオプションを提供する必要がある場合は、JavaScriptを使用してユーザー入力に基づいてオプションを動的に変更する必要がある場合があります。 、HTML5 Datalistは、テキスト、検索、URL、Tel、電子メール、日付、月、時間、DateTime-Local、数字、範囲、色など、さまざまな入力タイプで使用できます。ただし、AutoComplete機能は、範囲や色などのいくつかの入力タイプでは期待どおりに機能しない場合があります。選択要素で使用します。 Datalistは、入力フィールドにオートコンプリートの提案を提供するように設計されていますが、選択要素はオプションのドロップダウンリストを提供します。ドロップダウンリストが必要な場合は、代わりにSELECT要素を使用する必要があります。 JavaScriptをHTML5データリストで使用できますか？削除するか、オプションを変更します。ただし、DatalistはOnchangeやOnclickなどのオプションのイベントをサポートしていないことに留意してください。代わりに、イベントリスナーを関連する入力フィールドにイベントリスナーを追加する必要があります。 検索フィールドにHTML5データリストを使用できますか？分野。ユーザーの入力に基づいてオートコンプリートの提案を提供し、ユーザーエクスペリエンスを向上させることができます。ただし、可能な検索用語をデータリストに手動で入力する必要があります。 html5データリストをtextareaで使用できますか？ 。 Datalistは、Textareaではなく、入力フィールドにオートコンプリートの提案を提供するように設計されています。 Textareaのオートコンプリート機能が必要な場合は、JavaScriptライブラリを使用するか、独自のソリューションを構築する必要がある場合があります。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
