JavaScript で編集可能なコンボボックスを作成する
入力フォームフィールドは、特に HTML フォームを操作するときに、多くの場所で使用されます。
入力フィールドでは、単一の機能しか使用できません。つまり、入力フィールド内にテキストを入力する必要があります。ドロップダウンリストなどの他の機能を追加する場合は、別の HTML 要素を使用して実装する必要があります。
これらの両方の機能を入力フィールド自体の中に実装したい場合はどうでしょうか。それも可能ですか？
はい、これは datalist の助けを借りて行うことができます。datalist を使用して、2つの機能（つまり、テキスト入力とドロップダウンリスト）を同時に実現する編集可能な ComboBox を作成できます。
JavaScript で編集可能なコンボボックスを作成する
以下に、label タグと body タグ内の script タグで構成される HTML ドキュメントがあります。ラベルは、ユーザーが ComboBox に関する情報を提供するのに役立つ単なるテキストです。
そして、script タグを使用して、コードを記述する JavaScript ファイルをリンクしました。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<label>List of Countries: </label>
<script src="./index.js"></script>
</body>
</html>
出力：
List of Countries:
コードを実行すると、上記の出力が得られます。JavaScript で編集可能な ComboBox を作成するには、以下の手順に従う必要があります。
ステップ 1：JavaScript で datalist を作成する
入力フィールドとドロップダウンリストの組み合わせを作成することを目指しています。
まず、datalist リストを作成し、次に入力フィールドを作成します。その後、入力フィールドに datalist を追加します。
datalist HTML 要素は、ユーザーが選択できるオプションのセットを含むリストを作成します。datalist 内のオプションは、option HTML 要素で表されます。
以下に、datalist を作成する createDataList() という関数を作成しました。この関数内で、datalist に表示されるすべてのオプションを指定した値の配列を作成しました。
要件に応じて、datalist に必要な数のオプションを追加できます。datalist を作成するには、document.createElement() 関数を使用し、パラメーターとして datalist を渡し、datalist 変数内に datalist を格納します。
次に、dataList.id を使用してこの datalist に ID を設定します。values 変数内に格納されているオプションを datalist に追加するために、配列内で定義しました。forEach ループを使用して、各配列要素を反復処理します。
すべての配列要素は、forEach ループによって value 変数内に格納されます。forEach 内に、option HTML 要素を作成します。
このオプション HTML 要素は、すべての反復ですべてのオプションに対して作成されます。
function createDataList() {
var values =
['Afghanistan', 'Åland Islands', 'Albania', 'Algeria', 'American Samoa'];
var dataList = document.createElement('datalist');
dataList.id = 'country_list';
values.forEach(value => {
var option = document.createElement('option');
option.innerHTML = value;
option.value = value;
dataList.appendChild(option);
})
document.body.appendChild(dataList);
}
createDataList();
option.innerHTML を使用して、リストから特定のオプションを選択した後に表示するデータを指定します。option.value は、リストが表示されているときに表示されるデータを指定します。
たとえば、option.innerHTML = "IN"および option.value = "INDIA"の場合、リストが表示されていると、オプションとして INDIA が表示されますが、オプション INDIA を選択すると、入力フィールドに、IN が表示されます。この例では、これらの値の両方を同じに設定しています。
オプションに値を割り当てた後、そのオプションを datalist に追加できます。最後に、すべてのオプションを datalist に割り当てた後、appendChild 関数を使用して datalist を body タグに追加できます。
最後に、createDataList() 関数を呼び出します。この関数は、datalist を作成します。この関数を呼び出すことを忘れないでください。そうしないと、datalist が作成されません。
ステップ 2：入力フィールドに datalist を追加する
datalist を作成したので、そのリストを入力フィールドに追加できます。
このためには、最初に HTML ドキュメント内に input タグを作成する必要があります。この input タグでは、次のようないくつかの属性を指定する必要があります。
type：入力フィールドが取得できるデータのタイプ。この例では、国の名前（テキスト）を入力して、タイプをテキストとして指定します。id：入力フィールドの一意の ID。list：これは最も重要な属性であり、datalistを使用している場合はこの属性を指定する必要があります。ここで、この属性の値は、datalist要素の作成時に指定したdatalist要素のidになります。
<input type="text" id="country" list="country_list">
これは、JavaScript で編集可能な ComboBox を作成するプロセス全体でした。次に、ブラウザ内でコードを実行して出力を確認します。
Web ページがブラウザ内にロードされた後、入力フィールドをダブルクリックすると、上記のように datalist 内で定義したオプションを含むリスト全体が表示されます。
入力フィールド内に文字を入力し始めると、リストも表示されます。ただし、リストに表示されるオプションは、入力する文字によって異なる場合があります。
上記は、JavaScript を使用して入力フィールドとドロップダウンリストの 2つの機能を備えた編集可能な ComboBox を作成して使用する方法です。
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn