Chips Style Vuetify Autocomplete Menu / Dropdown Feature

Question

Chips Style Vuetify Autocomplete Menu / Dropdown Feature

I am looking to change the appearance of the items in the dropdown menu of my Autocomplete Box. Vuetify-Autocomplete

Currently, it displays the standard style for each item: Current

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

However, I would like the items to be displayed in a chips-style format like this:

Chips-Style

If possible, I would also like to assign specific colors to each tag. I am currently showcasing them in a table using the normal "v-chip" component, which is working well! Table with colored chips

I have attempted tweaking CSS and the V-autocomplete component, but encountered errors each time.

I tried searching for something like

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

as shown in this issue on Stackoverflow, but for the properties/items within the menu instead of the menu itself.

Another solution could be creating a custom version that doesn't use the dropdown, where I check if the string is in one of the chips in my chip-list and display them below the search bar. However, this would mean sacrificing some cool autocomplete features.

I am unable to add pictures at the moment due to being new here. Apologies for that!

I hope I have provided all necessary information.

javascript css vue.js autocomplete vuetify.js

Answer 1

Answer №1

Take a look at this amazing codesandbox I created: https://codesandbox.io/s/stack-86921421-bcdfv?file=/src/components/AutoChips.vue

Certain Vuetify components come with a feature known as slots, which allow you to personalize them according to your requirements. For example, the v-autocomplete component includes an item slot that enables you to customize the items in the displayed list by creating a custom template.

<v-autocomplete
   v-model="values"
   :items="items"
   chips
   deletable-chips
   multiple
   label="Customize Autocomplete 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 assign a custom color to each v-chip by implementing a simple method and providing the item value as an argument.

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 wish to customize the selected chips as well, you can achieve it by making adjustments to the selection slot. For more information on all available slots for the v-autocomplete component, refer to its API documentation page. https://vuetifyjs.com/en/api/v-autocomplete/#slots

https://i.sstatic.net/3zJ6F.png

Answer 2

Take a look at this amazing codesandbox I created: https://codesandbox.io/s/stack-86921421-bcdfv?file=/src/components/AutoChips.vue

Certain Vuetify components come with a feature known as slots, which allow you to personalize them according to your requirements. For example, the v-autocomplete component includes an item slot that enables you to customize the items in the displayed list by creating a custom template.

<v-autocomplete
   v-model="values"
   :items="items"
   chips
   deletable-chips
   multiple
   label="Customize Autocomplete 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 assign a custom color to each v-chip by implementing a simple method and providing the item value as an argument.

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 wish to customize the selected chips as well, you can achieve it by making adjustments to the selection slot. For more information on all available slots for the v-autocomplete component, refer to its API documentation page. https://vuetifyjs.com/en/api/v-autocomplete/#slots

https://i.sstatic.net/3zJ6F.png

Chips Style Vuetify Autocomplete Menu / Dropdown Feature

Answer №1

Similar questions

Changing the screen size of a panel using asp.net and c#

constructing a nested container using XMLHttpRequest

How to Retrieve Error Message from Response in Django REST Framework When Making a 400 Bad Request

Discover the indices of elements that, when their values are added together, equal x

Problem with applying ng-class directive in AngularJS

"Using JavaScript to Make Requests on Mobile Devices via HTTP

Tips for utilizing the Apollo cache consistently during page transitions in NextJs

What are the consequences of excluding a callback in ReactJs that may lead to dysfunctionality?

Managing data in a database on Discord using JavaScript to automatically delete information once it has expired

Access the outcome by utilizing a for loop

Django CSS not loading properly on webpage after initial load

The Contact.php page has the ability to send emails, however, the content of the

Is there a way to modify the scroll ion-content's color scheme?

I need to use JavaScript to create HTML to PDF and then upload the PDF file to a SharePoint Document Library

Is there a way for me to receive a success message when I successfully set data in Firebase?

Obtaining a substantial pdf file using html2pdf

Angular pagination with enforced ellipses using Bootstrap

Personalized Angular dropdown menu

Troubleshooting a jQuery Drop-Down Problem

How can I reduce the size of a Bootstrap 5 carousel that spans the entire screen?