單擊時清除輸入值並重置數據列表選項下拉列表

Question

我創建了一個輸入，其中包含一個帶有一些選項的數據列表，如下所示：

<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>

當輸入有一個值時，例如“apple”，並且用戶再次單擊輸入我想清除該值，以便用戶可以 select 另一個水果。 所以我用香草Js做了這個

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

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

它正在工作，但是當我單擊輸入並清除值時，帶有選項的下拉列表僅顯示用戶選擇的最后一個值。 在那個 apple 示例中，當用戶再次單擊以清除該值時，只有 apple 將作為選項出現。

這是 JSFiddle 上的一個實時示例： https://jsfiddle.net/d8fas05u/14/

我希望再次顯示所有選項。 有沒有辦法做到這一點？

Answer 1

我創建了一個輸入，其中包含一個帶有一些選項的數據列表，如下所示：

<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>

當輸入有一個值時，例如“apple”，並且用戶再次單擊輸入我想清除該值，以便用戶可以 select 另一個水果。 所以我用香草Js做了這個

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

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

它正在工作，但是當我單擊輸入並清除值時，帶有選項的下拉列表僅顯示用戶選擇的最后一個值。 在那個 apple 示例中，當用戶再次單擊以清除該值時，只有 apple 將作為選項出現。

這是 JSFiddle 上的一個實時示例： https://jsfiddle.net/d8fas05u/14/

我希望再次顯示所有選項。 有沒有辦法做到這一點？

Answer 2

你應該點擊按鈕 .

因為如果您單擊空間區域，也許我認為它會顯示輸入值的歷史記錄。 這意味着實時代碼是正確的。