单击时如何清除数据列表输入？

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>