Question

我创建了一个数据列表，该列表显示了用户在关闭程序时所保存的数据。我希望数据列表仅在用户单击下拉箭头（或输入框）时显示，而在用户开始键入时隐藏。我尝试过：

创建一个oninput事件，希望在用户开始键入数据时隐藏数据列表。
使用datalist.style.display = none;隐藏数据列表
尝试在此处编写的代码：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

我怀疑您是否可以替换<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>

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

2 个答案: