用戶開始輸入時隱藏數據列表選項

Question

我創建了一個數據列表，該數據列表顯示了用戶在關閉程序時所保存的數據。 我希望數據列表僅在用戶單擊下拉箭頭（或輸入框）時顯示，而在用戶開始鍵入時隱藏。 我試過了：

1. 創建一個oninput事件，希望在用戶開始鍵入時隱藏數據列表。
2. 通過使用datalist.style.display = none;隱藏數據列表datalist.style.display = none;
3. 試用此處編寫的代碼： 避免過濾輸入元素中的數據列表項 （盡管在我的情況下不起作用，因為我需要使用純JS）

感謝您的幫助，謝謝。

編輯：這是我的代碼：

<div style="top:60px;position:absolute;z-index:2" id="speechBox">
    <input id ="userText" name="userText" type="text" list = 'talk-list' oninput = "hideList()"></input>
    <span class = "dropdown" title = "Saved Talk"><datalist id = 'talk-list'></datalist></span>
    <button id="speakText" class="toolbutton" title="Speak"></button>
  <hr>
</div>

<script>
    function hideList() {
        var hiddenList = document.getElementById("talk-list");
        hiddenList.style.display = none;
    }
</script>

注意：數據列表不為空。 我有一個外部腳本，可以向數據列表添加無限數量的選項。

Answer 1

我懷疑您是否可以替換<datalist>元素的行為。 如果我是你，那么我將根據自己的身體情況制作自己的數據列表。 下面的示例仍然有要走的路，但是如果您想走這條路，這應該可以幫助您入門。

您在帖子中提到的第三個解決方案並不是真正解決數據列表問題的直接解決方案。 相反，它建議使用一個單獨的庫，該庫可以呈現類似於數據列表的ui元素，事實證明它來自jQuery。 我的建議是完全一樣的，除了您要編寫自己的。

 function hideList() { const list = document.querySelector("#talk-list"); list.style.display = "none"; } function showList(){ const list = document.querySelector("#talk-list"); list.style.display = "block"; } 

 #talk-list{ border: 1px solid #ccc; display: none; } button{display: block} 

 <div style="top:60px;position:absolute;z-index:2" id="speechBox"> <input id ="userText" name="userText" type="text" list = 'talk-list' oninput = "hideList()" onclick="showList()"></input> <div id = 'talk-list'> <div value="foo">foo</div> <div value="bar">bar</div> </div> <button id="speakText" class="toolbutton" title="Speak">Submit</button> </div> 

Answer 2

一種方法是在輸入中有值時更改數據列表ID。 如果沒有值，請改回id，以便他們可以選擇數據列表中的選項，而不必鍵入新的選項。

 function hideList(input) { var datalist = document.querySelector("datalist"); if (input.value) { datalist.id = ""; } else { datalist.id = "talk-list"; } } 

 <input id ="userText" name="userText" type="text" list = 'talk-list' oninput="hideList(this)"></input> <span class = "dropdown" title = "Saved Talk"><datalist id = 'talk-list'><option>Apple</option><option>Ball</option><option>Calculator</option><option>Donkey</option></datalist></span> <button id="speakText" class="toolbutton" title="Speak">Speak</button>