javascript - 如何在点击时清除数据列表输入？

Question

我在 Lit-Element Web 组件中有这个数据列表:

<input list="cars" name="car" placeholder = "Type car name">

<datalist id="cars">
  <option value="Jeep">
  <option value="Lamborghini">
  <option value="Ferrari">
  <option value="Fiat 500">
  <option value="Gran Torino">
</datalist>

如果我从列表中选择其中一个选项，然后再次单击输入字段，我将看不到选项列表，而只能看到选定的选项。如果我想查看所有选项，我必须使用键盘手动删除输入字段上的选项。
即使选择了其中一个选项，是否存在显示所有选项的方法？
或者更好的是，是否存在一种清除焦点或点击输入字段的方法？
没有 JQuery。

Answer 1

创建 onfocus和 onchange您的 input 上的听众元素在选择一个选项后清除焦点，然后清除焦点上的输入。

<input list="cars" name="car" onfocus="this.value=''" onchange="this.blur();" placeholder = "Type car name">

<datalist id="cars">
  <option value="Jeep">
  <option value="Lamborghini">
  <option value="Ferrari">
  <option value="Fiat 500">
  <option value="Gran Torino">
</datalist>