如何在空白时隐藏datalist中的下拉列表

Question

我有一个输入和数据表作为动态数据的自动完成搜索。 当我在输入中键入“F”时，我使用我的端点搜索那些与我的查询匹配的元素。如

<form >
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

当您搜索“F”之类的内容时，结果会正确显示。 删除“F”后的结果：

我的问题是当我从输入中删除我的查询并且查询为空“”时，我仍然得到相同的结果，我无法隐藏此下拉列表，直到我点击任何地方。

在我决定再次开始输入之前，我怎么能隐藏这个列表下拉列表？

我正在使用Google Chrome 版本66.0.3359.139（官方版本）（64位）