Combine q-select and q-cards

[omgwalt]

I’ve got Text Autocomplete using q-select accessing my customer list based upon https://quasar.dev/vue-components/select#Example--Text-autocomplete

I’ve also got some q-cards accessing the same customer list displaying each customer in a separate card based upon https://quasar.dev/vue-components/card#Example--Basic-cards

What I want to do is to combine the two features together so that when the user narrows down the items in the customer list by typing a few letters of the customer’s name, and then the user chooses the one that matches their request from the drop-down, the q-cards list will similarly filter down to the same selected item.

Can someone please give me an idea of how to go about doing this?

[tof06]

Hi @omgwalt
you can use the filtered options to display your card.
Something like this :
https://codepen.io/cp-tof06/pen/YzXdzoe

[ahiguita]

Hi @omgwalt

I think that the best way is use q-table, check this sample: https://codepen.io/nomada86/pen/gOpZpEm?editable=true&editors=101
You can custom the card if you want https://quasar.dev/vue-components/table#Grid-style

If this not working for you, then you will need use code, I build a simple sample, check: https://codepen.io/nomada86/pen/zYGyvBO
You will need work in this code

[omgwalt]

Thanks guys. I checked out both of your suggestions!

@eurus-pro I really like what you shared. It matches what I had in mind very, very well. I especially like that first solution a lot! Thank you again!