Vuetify Autocomplete Menu / Dropdown in chips style

Question

I want to change the Style of the Items in the drodpown Menu of my Autocomplete Box. Vuetify-Autocomplete

Currently it shows the standard Style for each Item: Current

<v-autocomplete
chips
deletable-chips
multiple
v-model="selectedTags"
:items="tags"
></v-autocomplete>

But I want it to show chips Items-Style like this:

Chips-Style

If possible even with specific colors for each Tag. I am currently displaying them in a Table with the normal "v-chip" component which works great! Table with colored chips

I tried to tinker a little bit with CSS and with the V-autocomplete Component which resulted in Errors each Time.

I tried to find something like

:menu-props="{
nudgeBottom: 15 + 'px',
zIndex: 2,
allowOverflow,
rounded: 'xl'      // <-- Here ✅
}"

shown in this Issue StackoverflowIssue. But for the Props/Items inside the Menu instead for the Menu.

The other solution would be to do a do-it myself Version which doesn't use the dropdown and I simply check if the string is contained in one of the Chips in my Chip-List and display them beneath the Searchbar. But then I would need to reject some cool features of autocomplete.

I can't append Pictures yet, because I am too new. Sorry for that!

I hope I included all Infos.

Answer 1

Check this codesandbox I made: https://codesandbox.io/s/stack-70189718-eqwgl?file=/src/components/AutoChips.vue

Some vuetify components have a thing called slots, that you can customize to your needs, in case of v-autocomplete has an item slot, to customize the items of the displayed list. All you need to do is create a custom template for an item of the list.

<v-autocomplete
   v-model="values"
   :items="items"
   chips
   deletable-chips
   multiple
   label="Autocomplete custom items"
>
   <template v-slot:item="{ item, on, attrs }">
      <v-list-item v-on="on" v-bind="attrs" #default="{ active }">
         <v-list-item-action>
            <v-checkbox :color="getChipColor(item)" :input-value="active"></v-checkbox>
         </v-list-item-action>
         <v-list-item-content>
            <v-list-item-title>                      
               <v-chip dark :color="getChipColor(item)"> {{ item }} </v-chip>
            </v-list-item-title>
         </v-list-item-content>
      </v-list-item>
   </template>
</v-autocomplete>

You can set a custom color for each v-chip by creating a simple method and passing the item value.

getChipColor(item) {
   switch (item) {
      case 'foo':
         return 'red darken-2' 
      case 'bar':
         return 'green darken-2' 
      case 'fizz':
         return 'orange darken-2' 
      case 'buzz':
         return 'purple darken-2'          
      default:
         return 'grey lighten-2'
   }
}

If you would like to customize the selected chips as well, you can do it by simply modifying the selection slot. You can check all the available slots of the v-autocomplete on it's API documentation page. https://vuetifyjs.com/en/api/v-autocomplete/#slots