自定义搜索建议下拉列表VueJS

Question

搜索下拉焦点不起作用

我目前正在开发自定义下拉搜索字段，尝试使用箭头键启用建议导航。尽管验证了控制台中的代码并确认识别了正确的元素，但焦点功能并未按预期运行。您可以在

[CodePen](https://codepen.io/Muaviya-Imran/pen/bGZYEJY)

上找到我的代码实现

Answer 1

您遇到的问题是 div 默认情况下无法聚焦。

您可以通过在 div 上添加

tabindex="0"

（ID 为

filter + index

）来解决此问题。

您的

handleArrowDown

功能似乎存在一些问题。这有点复杂，如果您使用一些参考资料，可以变得更简单。

我将

:ref="index"

添加到我添加

tabindex

的同一 div，然后将

handleArrowDown

更改为：

handleArrowDown(event) {
      this.$refs[this.focusedChildIndex - 1][0].focus();
      this.focusedChildIndex++;
    },

只要我明白你的意思，这应该可以解决你的问题。