のように効果的に扱うので、css
でスタイリングできます
JavaScript
のすべてのオートコンプリート機能を複製します
さらに強化し、コードはGitHubで利用できます。それを使用するには、HTMLページのどこにでもES6モジュールとしてスクリプトをロードします。 JSDELIVR CDN URLを使用できます：
<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>
バンドラーを使用している場合は、
またはnpmでインストールできます：
<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>
<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>
注：は使用できません。
cssを追加して、
例：
<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>
を参照してくださいhtml5
codepen。
スタイリングは機能しますが、努力する価値はありますか？ 私は…
ではないと思う
ブラウザの標準キーボード、マウス、およびタッチコントロールを合理的なアクセシビリティで再実装することは困難です。 MDNの例はキーボードイベントをサポートしていません。改善しようとしている間、必然的に一部のデバイスに問題があります。
CSSの問題を解決するために200行のJavaScriptに依存しています。それは1.5kbに最小化されますが、同じページに多くの長い
