34

多くの JavaScript ソリューションがあることは知っていますが、オートコンプリートでテキストを入力する HTML5 メソッドはありますか? datalist 要素は、リスト内の内容に制限するのではなく、カスタム値を入力できることを除いて、ほとんど私が求めているものです。

4

4 に答える 4

69

datalist要素を試す必要があります。これはW3C HTML5 勧告で明確に定義されており、おそらく現在および近い将来の最良の選択肢です。

datalist 要素は、 input要素の list 属性を使用してinput要素に接続されます。

datalist 要素の子孫であり、無効になっておらず、値が空の文字列ではない文字列である各 option 要素は、提案を表します。各候補には値と ラベルがあります。

Google chrome およびchromiumベースのブラウザは v21.x 以降でサポートされています (2014 年 12 月現在、現在のバージョンは 39 です。他のブラウザの互換性ステータスはこちらで確認してください) 。FirefoxおよびOperaも長期間サポートしています。最新の (!) IE バージョンは、データリストを部分的にサポートしています。

デモ:北村英二氏による優れたデータリストの実装。

Polyfill : RelatedDropdownもチェックしてください。これは、jQuery と Modernizr に依存する HTML5 データリスト ポリフィルです。

この例を実行してみてください:

<input type="search" list="languages" placeholder="Pick a programming language..">

<datalist id="languages">
  <option value="PHP" />
  <option value="C++" />
  <option value="Java" />
  <option value="Ruby" />
  <option value="Python" />
  <option value="Go" />
  <option value="Perl" />
  <option value="Erlang" />
</datalist>

W3 リファレンス: https://www.w3.org/TR/html5/forms.html#the-datalist-element

于 2013-11-04T23:06:44.753 に答える
17

HTML5 には、またはフィールドでautocomplete指定できる属性があります。onoff

次に例を示します。

<form action="/form.php" autocomplete="on">
  First name:<input type="text" name="first_name"><br>
  Last name: <input type="text" name="last_name"><br>
  E-mail: <input type="email" name="email" autocomplete="off">
  <input type="submit">
</form>

keyupこれが機能する方法は、最初に送信した値が、各フィールドのこのページに次にアクセスしたときに提案されるということです。

  • この機能の使用を決定する際の重要な問題は、ブラウザーの互換性です。あなたの最善の策は、複数のブラウザをチェックして、それが機能することを確認することです. caniuse.comのサポートはかなり悪いように見えますが、最新のブラウザーを使用しているユーザーを支援するために使用しても問題はないと思います。

W3Schoolsに関する他のファクトイドautocompleteは、基本をカバーしているため、この場合は嫌いではありません。

  • オートコンプリートがオンの場合、ブラウザーは、ユーザーが以前に入力した値に基づいて値を自動的に補完します。
  • フォームのオートコンプリートを「オン」にして、特定の入力フィールドを「オフ」にすることも、その逆も可能です。
  • autocomplete 属性は、テキスト、検索、URL、電話、電子メール、パスワード、日付ピッカー、範囲、および色のタイプで機能します。
于 2013-03-09T20:46:23.770 に答える
3

HTML5 では、JavaScript なしで Google サジェスト スタイルのオートコンプリート入力が可能です。

この記事を参照してください: HTML5 スタイルの「Google サジェスト」

ただし、まだ十分にサポートされていません。この記事の例は、現時点では Opera でのみ機能します。

現時点では、オートコンプリートウィジェットを備えた JQuery UI のような、幅広いブラウザー サポートを備えた十分にテストされたライブラリを使用するのがおそらく最善です。

于 2013-07-03T17:51:48.047 に答える