Vuetify 实现搜索框

Posted 2023-04-06

参考技术A 使用 Vuetify 中的 v-menu 组件实现，控制光标焦点，在输入框获取的焦点时弹出联想词汇菜单，支持上下按键选中内容，菜单位置，样式按需调整即可

数据获取方面通过监听输入框内容变化，调用对应接口获取数据

如果产品功能要求极高的性能，要加防抖和节流处理

无法从自定义自动完成搜索栏中选择项目 (Vue.js/Vuetify.js)

【中文标题】无法从自定义自动完成搜索栏中选择项目 (Vue.js/Vuetify.js)

【英文标题】：Can't select item from custom autocomplete search bar (Vue.js/Vuetify.js)

【发布时间】：2020-09-07 13:52:48

【问题描述】：

注意：我没有使用 v-autocomplete 或 v-combobox，因为它们无法完成我想做的某些事情。

我在实现自动完成搜索栏时遇到问题。搜索栏按预期执行所有操作，除了一件小事，那就是能够选择一个项目。当我将鼠标悬停在某个项目上时，指针会变成一只手，表示它是可点击的。一旦被“点击”，@click 事件应该会调用一个方法，但是当一个项目被“点击”时什么都不会发生。

我知道问题出在哪里，但我正在努力寻找解决方案。问题出在以下部分：

<v-text-field //this is the input
    ...
    @focus="isFocused = true" @blur="isFocused = false"
    ...
></v-text-field>

<v-list v-show="queried_cards.length && isFocused"> //this is the list
    <v-list-item @click="setCard(card)" v-for="(card, index) in queried_cards" :item="card" :key="index">
        ...
    </v-list-item> 
</v-list>

因此，基于上述标记，我只想在数组 queried_cards 不为空且 v-text-field 被关注时显示列表。如果我单击文本字段，则列表将被隐藏，这是我想要的结果。碰巧它与能够选择一个项目的功能相冲突，因为当您单击一个项目时，这与单击文本字段（触发@blur）相同。这导致 setCard() 方法没有被调用，因为 v-list 在事件 @click="setCard(card)" 发生之前就消失了。

我已经把这个积压了一段时间，以为我最终能够找到一个解决方案，但我只是被这个项目的所有其他东西搞得筋疲力尽。

我创建了一个代码笔来说明我的问题：https://codepen.io/chataolauj/pen/RwwYxBg?editors=1010

【参考方案1】：

问题是你设置了列表<v-list v-if="queried_cards.length && isFocused" class="pa-0 overflow-y-auto" max-height="300" two-line>

当您单击列表项时，isFocused 设置为 false，因为您在输入字段上绑定了 @blur="isFocused=false"。所以它消失了。当您选择项目时，您需要想办法让isFocused 保持为真。

快捷方式：

在您的v-container 上绑定一个点击功能（您希望当用户点击输入或结果列表之外时，隐藏点亮的结果）：

  <v-container fluid @click="checkHide">

    checkHide(e)
   // if click on input or the result list, keep the list to show
      if(e.target.tagName ==="INPUT" || e.target.classList.contains("v-list-item__content"))
        this.isFocused = true
      else
// click outside of them, hide it
        this.isFocused = false
      
    

在您的输入元素上，删除 @blur。

【讨论】：

是的，我知道问题出在哪里，并在我的原始帖子中指定了它。我想看看是否有人对如何使它在点击事件完成后不模糊有任何想法。

如果我单击 v-container 中的任何内容，它可以工作，但如果我单击 v-container 中的某些内容，则它不起作用。例如，如果我单击应用程序栏，则列表文本字段和列表仍然是焦点。既然是这种情况，我尝试检查 v-app，但没有任何作用。