javascript - スタイリングの提案ドロップダウン

Question

デフォルトでは、テキスト フィールドに何かを入力すると、以前に入力した値の候補が表示されます。私の質問は、CSS を使用してその提案ドロップダウンの外観を変更することは可能ですか? または、その動作を再現する JavaScript コードを提案していただけますか?

Answer 1

いいえ、ブラウザのネイティブ実装です。ブラウザーは新しい DOM 要素を追加または変更することさえしないため、ドロップダウン リストのスタイルを設定することはできません。100% 確実ではありませんが、ドロップダウン リストが表示ページの上の別のレイヤーにあるようです。オートコンプリートの独自の Javascript 実装が必要になります。

ちなみに、このブラウザーの動作を無効にするには、これを input 要素に追加します。

autocomplete="off"

すべてのブラウザーが autocomplete 属性をサポートしているわけではないことに注意してください

Answer 2

ネイティブ ブラウザーのオートコンプリート ボックスをいじることはできませんが、カスタム実装を使用することはできます。最も人気があるのはこれだと思います: http://jqueryui.com/autocomplete/

ユーザーが入力している各用語をキャプチャしない限り、カスタム実装はユーザーが以前に入力した値を提供しないことに注意し、そのリストを使用してオートコンプリート ボックスに入力します。