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.

enter image description here

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?

Sku
  • 163
  • 2
  • 14
  • See here if it answers your question: https://stackoverflow.com/questions/63685028/how-to-clear-datalist-input-on-click – Anony Jan 10 '23 at 16:22

1 Answers1

0

You should click on button enter image description here.

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

dada
  • 167
  • 5