入力候補「datalist 」を利用する際に、labelも別のテキストボックスに表示したい

Question

入力候補を表示する「datalist 」使用する際、
ラベルの値も確認の為、別のテキストボックスに表示する事はできるのでしょうか？

例えば、下のような場合、name="n_test"に”テ”と入力し、
候補の”テスト”を選んだ場合、name="n_test"には"2"がセットされてしまいます。
確かにフォームの値として、引き渡したいのは"2"で良いのですが
これでは、選択したラベルがわからなくなってしまいます。
なので、その次のname="n_test2"を読み取り専用にし、
”テスト”をセットしたいのですが。可能でしょうか。
本来は表示用の箇所はテキストボックスではなく、innerHTMLで書き換えられれば
ベストですが、まずは、ラベルを表示したいのです。

<form action="1.php">
<p><input id="test" name="n_test" list="list"></p>
<p><input id="test2" name="n_test2"></p>
<p><button>内容を送信</button></p>
</form>
<datalist id="list">
<option label="サブジェクト" value="1"></option>
<option label="テスト" value="2"></option>
<option label="OK" value="3"></option>
</datalist>

Answer 1

出力のために入力(input要素)を使っては駄目です。
output要素を使います。
そのname属性は、input要素のname属性と同じにします。

    <p><input id="test" name="n_test" list="list"></p>
    <p><output name="n_test"></output></p>

document.addEventListener ('input', (event)=> {
  let
    e = event.target,
    list = e.list;

  if (list) {
    let
      option = list.querySelector (`option[value="${e.value}"]`),
      output = document.querySelector (`output[name="${e.name}"]`);

    if(option && output)
      output.value = option.label;
  }

}, true);

Comments

[rabupon]

ありがとうございます。
思い通りの動きとなりました。