datalistを使ったコンボの値のセットと取得

Question

<input type="text" list="empCode" id="testId" name="testName" />
<datalist id="empCode">
<option value=""></option>
<option value="001">TestA</option>
<option value="002">TestB</option>
</dataList>

このようなコードでコンボボックスを作ったのですが、
コンボを選択した時に表示される内容が001というコードになってしまいます。
valueにTestAとすれば良いのかもしれませんが、
document.getElementById("testId").value
で取得できる値は"001"にしたいです。

どのようにしたら
選択時はラベルが表示され、値の取得はコードが取れるでしょうか？

宜しくお願い致します。

Comments

[x_x]

selectではだめな理由はあるのでしょうか？

[mi37]

入力の絞り込みをしたいため、selectタグから変更しようとしています。

Answer 1

そのままでは難しそうなので、type="hidden"を用意していれるように

<input type="hidden" id="testId" name="testName" />
<input type="text" list="empCode" />
<datalist id="empCode">
<option value=""></option>
<option data-value="001">TestA</option>
<option data-value="002">TestB</option>
</dataList>

document.querySelector('[list="empCode"]').addEventListener('change', function(event) {
  const val = this.value;
  const option = Array.from(this.list.options).find(function(a) { return a.label === val; });
  document.getElementById('testId').value = option ? option.dataset['value'] : '';
}, false);