Vuetify 2 autocomplete - Search entire name by first and last

Question

I am using autocomplete component from vuetify 2

My application is returning an array of full names, like:

['André Ramalho Rodrigues', 'Joaquim de Almeida', 'Filipe Joaquim Almeida']

The autocomplete works as expceted but, if I try to search:

• Joaquim Almeida

It only appears the name "Filipe Joaquim Almeida" and I want that the application shows both names that have that two words:

• Joaquim de Almeida
• Filipe Joaquim Almeida

Is there a way to change the autocomplete component or do I need to program one component that does that for me?

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

Answer 1

Use filter and create a method.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: ['André Ramalho Rodrigues', 'Joaquim de Almeida', 'Filipe Joaquim Almeida']
  }),
  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>