单击时清除输入值并重置数据列表选项下拉列表

Question

I created an input that has a datalist with some options, like this:

<div>
  <input id="fruitsInput" type="text" list="fruits" placeholder="choose a fruit" >
  <datalist id="fruits">
    <option value="banana">  
    <option value="apple">      
    <option value="pear">    
    <option value="strawberrie">
  </datalist>
</div>

When the input has a value, for example "apple", and the user clicks on the input again I want to clear the value so the user can select another fruit. So I did this with vanilla Js

const input = document.getElementById("fruitsInput");

input.addEventListener('click', () => {
    if(input.value) {
    input.value = "";
  }
});

It is working, but when I click on the input and it clears the value, the dropdown list with the options only shows the last value that the user selected. In that apple example, only apple will appear as a option when the user clicks again to clear the value.

Here's an live example on JSFiddle: https://jsfiddle.net/d8fas05u/14/

I want all the options to be shown again. Is there a way to do it?

Answer 1

I created an input that has a datalist with some options, like this:

<div>
  <input id="fruitsInput" type="text" list="fruits" placeholder="choose a fruit" >
  <datalist id="fruits">
    <option value="banana">  
    <option value="apple">      
    <option value="pear">    
    <option value="strawberrie">
  </datalist>
</div>

When the input has a value, for example "apple", and the user clicks on the input again I want to clear the value so the user can select another fruit. So I did this with vanilla Js

const input = document.getElementById("fruitsInput");

input.addEventListener('click', () => {
    if(input.value) {
    input.value = "";
  }
});

It is working, but when I click on the input and it clears the value, the dropdown list with the options only shows the last value that the user selected. In that apple example, only apple will appear as a option when the user clicks again to clear the value.

Here's an live example on JSFiddle: https://jsfiddle.net/d8fas05u/14/

I want all the options to be shown again. Is there a way to do it?

Answer 2

You should click on button .

Because if you click on space area, maybe I think it display history of input value. This means live code is correct.