多くのJavaScriptソリューションがあることは知っていますが、オートコンプリートを使用してテキスト入力を行うHTML5メソッドはありますか? datalist要素は、リストの内容に制限するのではなく、カスタム値を入力できることを除いて、ほとんど私が求めているものです。
HTML5には、フィールドでautocomplete
またはon
として指定できるoff
属性があります。
以下に例を示します。
<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
でこのページにアクセスしたときに、提案されることです。
W3Schools からのautocomplete
に関するその他のファクトイドは、基本をカバーしているため、この場合は嫌いではありません。
datalist
要素を試してください。 W3C HTML5勧告 で明確に定義されており、おそらく現在および近い将来の机上で最良のオプションです。
Datalist要素は、input要素のlist属性を使用して input 要素に接続されます。
Datalist要素の子孫であり、無効になっておらず、値が空の文字列ではない文字列である各オプション要素は、提案を表します。各提案には、 値 と ラベル があります。
Google chrome and chromium v21.x以降のベースのブラウザはこれをサポートしています(2014年12月現在、現在のバージョンは39です。 他のブラウザはこちら )FirefoxおよびOperaも長期間サポートしています。 Modern(!)IEバージョンデータリストを部分的にサポート).
デモ:すばらしい 作業データリストの実装 北村英二。
Polyfill: RelevantDropdown も確認してください。 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
この質問はかなり古いですが、2017年の更新された回答があります!
オートコンプリートを有効にするための公式current WHATWG HTML Standardへのリンクです。
次の回答は、ここからの元の回答からです: https://stackoverflow.com/a/41965106/1696153
オートコンプリートをトリガーするには、input
タグに正しい名前を付けるだけです。
Googleは、モバイルデバイスに優しいWebアプリケーションを開発するための かなり素敵なガイド を作成しました。自動入力を簡単に使用できるように、フォームの入力に名前を付ける方法に関するセクションがあります。それはモバイル用に書かれていますが、これはデスクトップとモバイルの両方に適用されます!
オートコンプリートを有効にする方法に関する重要なポイントを次に示します。
<label>
フィールドすべてに<input>
を使用autocomplete
属性を追加を<input>
タグに追加し、この ガイド を使用して入力します。<input>
タグのname
およびautocomplete
属性に正しく名前を付けてください例:
<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
placeholder="Full name" required autocomplete="name">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
placeholder="[email protected]" required autocomplete="email">
<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="[email protected]" required autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel">
<input>
タグに名前を付ける方法オートコンプリートをトリガーするには、<input>
タグのname
およびautocomplete
属性に正しく名前を付けてください。これにより、フォームのオートコンプリートが自動的に許可されます。必ず<label>
!も用意してください!この情報は、 here にもあります。
入力に名前を付ける方法は次のとおりです。
name
には次のいずれかを使用します:name fname mname lname
autocomplete
:にはこれらのいずれかを使用しますname
(フルネーム)given-name
(名)additional-name
(ミドルネーム用)family-name
(姓)<input type="text" name="fname" autocomplete="given-name">
name
には次のいずれかを使用します:email
autocomplete
には次のいずれかを使用します:email
<input type="text" name="email" autocomplete="email">
name
には次のいずれかを使用します:address city region province state Zip zip2 postal country
autocomplete
:にはこれらのいずれかを使用しますstreet-address
address-line1
address-line2
address-level1
(州または県)address-level2
(都市)postal-code
(郵便番号)country
name
には次のいずれかを使用します:phone mobile country-code area-code exchange suffix ext
autocomplete
には次のいずれかを使用します:tel
name
には次のいずれかを使用します:ccname cardnumber cvc ccmonth ccyear exp-date card-type
autocomplete
:にはこれらのいずれかを使用しますcc-name
cc-number
cc-csc
cc-exp-month
cc-exp-year
cc-exp
cc-type
name
には次のいずれかを使用します:username
autocomplete
には次のいずれかを使用します:username
name
には次のいずれかを使用します:password
autocomplete
:にはこれらのいずれかを使用しますcurrent-password
(サインインフォーム用)new-password
(サインアップおよびパスワード変更フォーム用)HTML5を使用すると、Javascriptを使用せずに、Googleサジェストスタイルのオートコンプリート入力が可能になります。
この記事を参照してください: HTML5スタイルの「Google Suggest」
ただし、まだ十分にサポートされていません。この記事の例は、現時点ではOperaでのみ機能します。
現時点では、 Autocomplete ウィジェットを備えたJQuery UIなどの幅広いブラウザーサポートを備えた十分にテストされたライブラリを使用するのがおそらく最善です。
このMSDNガイドに従って、データリスト入力を強制し、データリストのオプションに一致するテキストのみを許可しました。 HTML Contstraint Validation APIを活用します。