如何防止 Vue Select 突出显示第一个选项？答案

【问题标题】：How to prevent Vue Select from highlighting the first option?如何防止 Vue Select 突出显示第一个选项？
【发布时间】：2021-02-21 17:21:16
【问题描述】：

我正在使用 Vue Select 作为预输入组件。它对服务器进行 AJAX 获取。

默认情况下，它会突出显示从服务器返回的第一个选项：

相反，我希望它能够像浏览器中的 Google 预输入控件一样工作。第一个选项未突出显示。相反，您必须按一次向下箭头才能突出显示它。

原因是我希望用户能够键入搜索，然后点击ENTER 以获得完整的搜索结果（对于上面示例中的“stan”，或者点击向下箭头一次或多次，并点击ENTER，然后搜索选定的选项。

如何让 Vue Select 不突出显示第一个选项？

（它似乎与 vue-select 的 data() 中的 typeAheadPointer 有关，但这就是我能够弄清楚的全部。）

【问题讨论】：

【解决方案1】：

我没有看到禁用突出显示的选项，但您可以设置它的样式以匹配周围项目的背景和文本颜色，从而有效地隐藏突出显示。例如，如果其他项目是白底黑字：

.vs__dropdown-option--highlight {
  background-color: white;
  color: black;
}

但是，这会产生完全禁用突出显示的副作用，这在使用键盘导航时对用户不友好。

【讨论】：

【解决方案2】：

对于未来的访问者，Jeff Sagal 说您无法在当前版本中执行此操作，但您可以在下一个主要版本中执行此操作：

【讨论】：