HTML5データリストを使用した軽量オートコンプリートコントロール

このチュートリアルでは、使用されていないHTML5 > 値属性を使用すると、同一の結果が生成されます：

<span><span><span><label> for<span>="country"</span>></label></span>country<span><span></span>></span>
</span>
<span><span><span><input> 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>

注：クロージング />スラッシュはHTML5ではオプションですが、コーディングエラーを防ぐのに役立つ可能性があります。 次の形式のいずれかを使用して、選択したラベルに従って値を設定することもできます。 オプション1：

オプション2：

どちらの場合も、有効なオプションが選択されている場合、入力フィールドは1、2、または3に設定されますが、UIはブラウザによって異なります。

<span><span><span><datalist> id<span>="mylist"</span>></datalist></span>
</span>  <span><span><span><option>></option></span>label one<span><span></span>></span>
</span>  <span><span><span><option>></option></span>label two<span><span></span>></span>
</span>  <span><span><span><option>></option></span>label three<span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span>

Chromeには、値とラベルの両方を含むリストが表示されます。オプションが選択されると、値は残ります。

<span><span><span><datalist> id<span>="mylist"</span>></datalist></span>
</span>  <span><span><span><option> value<span>="label one"</span> /></option></span>
</span>  <span><span><span><option> value<span>="label two"</span> /></option></span>
</span>  <span><span><span><option> value<span>="label three"</span> /></option></span>
</span><span><span><span></span>></span>
</span></span></span></span></span>

Firefoxには、ラベルのみのリストが表示されます。オプションが選択されると、値に切り替わります。

エッジには値のみが表示されます。

• 次のCodepenの例は、すべてのバリエーションを示しています：
を参照してください
• html5
by sitepoint（@sitepoint）によるオートコンプリートの例。

実装は進化しますが、今のところ、ユーザーを混乱させる可能性が高いため、値とラベルを使用しないことをお勧めします。

（回避策については以下で説明します。）

以上がHTML5データリストを使用した軽量オートコンプリートコントロールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。