Vuetify 2 自动完成 - 按名字和姓氏搜索整个姓名

Question

我正在使用 vuetify 2 中的自动完成组件

我的应用程序返回一个全名数组，例如：

[“安德烈·拉马略·罗德里格斯”、“若阿金·德·阿尔梅达”、“菲利佩·若阿金·阿尔梅达”]

自动完成功能按预期工作，但是，如果我尝试搜索：

• 若阿金·阿尔梅达

它只显示名字“Filipe Joaquim Almeida”，我希望应用程序显示包含这两个单词的两个名字：

• 若阿金·德·阿尔梅达
• 菲利佩·若阿金·阿尔梅达

有没有一种方法可以更改自动完成组件，或者我是否需要编写一个组件来为我做到这一点？

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

Answer 1

使用 filter 并创建一个方法。

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: ['André Ramalho Rodrigues', 'Joaquim de Almeida', 'Filipe Joaquim Almeida'],
    values: [],
    value: null,
  }),
  methods: {
    customFilter(item, queryText, itemText) {
      const words = queryText.split(' ')
      return words.every(word => item.toLowerCase().includes(word.toLowerCase()))
    }
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"> </script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"> </script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css">


<div id="app">
  <v-app id="inspire">
    <v-card>
      <v-container fluid>
        <v-row
          align="center"
        >
          <v-col cols="12">
            <v-autocomplete
             :items="items"
             :item-text="item => item.full_name"
             item-value="id"
             :filter="customFilter"
            >
            </v-autocomplete>
          </v-col>
        </v-row>
      </v-container>
    </v-card>
  </v-app>
</div>