JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5で入力値の候補オプション一覧を表示する方法

HTMLの<datalist>タグを使うと、<input>要素に対してあらかじめ用意した選択肢（入力候補）の一覧を定義できます。ユーザーがテキストボックスに文字を入力すると、該当する候補が自動的にサジェスト表示されるため、入力の手間を減らしつつ入力ミスも防げます。

基本の仕組み

<input>要素のlist属性に名前を指定し、<datalist>要素のid属性に同じ名前を設定することで、両者が関連付けられます。選択肢は<datalist>の中に<option>要素として記述します。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Datalistタグの例</title>
   </head>
   <body>
      <input list = "tutorials" />

      <datalist id = "tutorials">
         <option value = "Java">
         <option value = "ASP">
         <option value = "PHP">
         <option value = "Ruby">
         <option value = "jQuery">
      </datalist>

      <p>上記のチュートリアル名を入力してみてください。</p>
   </body>
</html>

動作のポイント

  • 入力欄にフォーカスすると、<datalist>に登録された選択肢がドロップダウン形式で表示されます。
  • 文字を入力すると、入力内容に一致する候補だけが絞り込まれて表示されます。
  • <datalist>はあくまで「入力候補」の提示なので、リスト外の値も自由に入力可能です。選択肢に限定したい場合は<select>要素の使用を検討しましょう。
  • 主要なモダンブラウザ（Chrome、Firefox、Edge、Safariなど）でサポートされています。
  1. JavaScriptでドロップダウン（select要素）の選択肢の数を取得する方法

    はじめにWeb開発において、ドロップダウンリスト（<select>要素）に含まれる選択肢（<option>）の数を取得したい場面はよくあります。JavaScriptとjQueryを使えば、わずか1行のコードで簡単に実現できます。例として、次のようなドロップダウンリストがあるとします。<select id=lengthListOfOptionDemo>    <option>John</option>    <option>Mike</option> &

  2. CSSのappearanceプロパティでセレクトボックスのドロップダウン矢印を非表示にする方法

    CSSのappearanceプロパティを使うと、要素をユーザーのOSが持つプラットフォームネイティブなスタイルに合わせて表示できます。このプロパティをnoneに設定することで、ブラウザがデフォルトで表示するUI部品（ドロップダウン矢印やスピンボタンなど）を非表示にすることが可能です。appearanceプロパティの構文CSSのappearanceプロパティは、以下のように記述します。Selector {     appearance: /*値*/;     -webkit-appearance: /*値*/; /*