javascript - 当用户开始输入时隐藏数据列表选项

Question

我创建了一个数据列表，显示用户关闭程序时保存的数据。我希望数据列表仅在用户单击下拉箭头(或输入框)时显示，并在用户开始输入时隐藏。我试过:

1. 创建一个 oninput 事件，希望数据列表在用户开始输入时隐藏。
2. 使用datalist.style.display = none;隐藏数据列表
3. 尝试此处编写的代码:Avoid filtering of datalist items in an input element (虽然它在我的情况下不起作用，因为我需要使用纯 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

您可以执行此操作的一种方法是在输入中有值时更改数据列表 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>