Vuetify 2 Autocomplete如何实现全名多关键词匹配？

不用自定义组件，Vuetify 2的Autocomplete可以通过filter属性自定义过滤规则，实现多关键词匹配的需求。

默认情况下，Autocomplete的过滤是模糊匹配连续字符串，所以搜索「Joaquim Almeida」时，只会匹配到包含连续这两个词的「Filipe Joaquim Almeida」，而「Joaquim de Almeida」因为两个词中间有「de」，默认过滤不会命中。

你可以通过以下步骤修改组件：

1. 添加filter属性，绑定自定义过滤函数
2. 实现过滤逻辑：拆分搜索关键词为多个独立词汇，检查选项文本是否包含所有词汇（不区分大小写）

修改后的完整代码：

<v-autocomplete
  :items="items"
  :item-text="item => item.full_name"
  item-value="id"
  :filter="customFilter"
></v-autocomplete>

在组件的methods中定义customFilter函数：

methods: {
  customFilter(item, queryText, itemText) {
    // 把搜索关键词拆分成单个词汇，过滤掉空字符串
    const queryWords = queryText.toLowerCase().split(/\s+/).filter(word => word);
    // 把选项文本转成小写，方便不区分大小写匹配
    const lowerItemText = itemText.toLowerCase();
    // 检查所有关键词是否都在选项文本中
    return queryWords.every(word => lowerItemText.includes(word));
  }
}

逻辑说明 #

• queryText.toLowerCase().split(/\s+/)：将搜索词转成小写，按任意空白字符拆分（支持多个空格分隔关键词）
• queryWords.every(...)：确保每个拆分后的关键词都能在选项文本中找到，这样只要选项包含所有关键词，不管顺序和中间有没有其他字符，都会被匹配到
• 不区分大小写的匹配，提升用户体验

这样修改后，搜索「Joaquim Almeida」时，「Joaquim de Almeida」和「Filipe Joaquim Almeida」都会被显示出来。

内容的提问来源于stack exchange，提问作者Erbi Silva