1

Google のログイン画面は次のようになります。

テキストの提案

それをクリックすると、候補のリストが表示されます。

ユーザーが入力をクリックすると、JavaScriptが入力された提案のリスト（または過去の検索と私の提案のリスト）が表示される、自分のWebサイトで同様のことをしたいと思います。

JavaScriptを使用してこれを行うにはどうすればよいですか?

4

2 に答える 2

2

入力フィールドに autocomplete=off 属性を追加することで、ネイティブのオートコンプリート機能をオフにすることができます。その後、独自のオートコンプリートを実装できます。ネイティブ リストにアイテムを追加することはできません。

幸いなことに、独自のオートコンプリートを作成するのに役立つライブラリがあります。たとえば、http://jqueryui.com/autocomplete/を参照してください:)

于 2013-01-13T19:00:21.827 に答える
1

HTML5<datalist>要素を使用できます。

datalist 要素を使用すると、オートコンプリート ドロップダウンに含める値のリストを指定できます。

<input type="text" placeholder="Type in here." list="mydatalist" />
<datalist id="mydatalist">
  <option value="Apple" />
  <option value="Orange" />
  <option value="Banana" />
  <option value="Pear" />
  <option value="Kiwi" />
  <option value="Grape" />
  <option value="Grapefruit" />
</datalist>

datalist は、input 要素から個別に定義されます。list入力要素は、指定された ID を持つデータリストにリンクする属性を介してデータリストにリンクされます。

この<datalist>要素は IE10、Firefox、Chrome、Opera でのみサポートされており、大文字と小文字は区別されません (少なくとも chrome 24 では)。以下のデモは、javascript を介してオプションを追加する方法を示しています。

デモ: http://jsbin.com/ewixoq/1/edit

更新: HTML5 要素をサポートしていない古いブラウザーの場合<datalist>は、jQuery データリスト プラグインを使用できます。リンク：

http://miketaylr.com/code/datalist.html

于 2013-01-13T19:40:04.953 に答える