Example of Combobox Component Vuetify 3 frontend vue 3 ui/ux layout nodejs

Implement functionality using standard capabilities v-combobox.

There is a data structure of objects:

const items = ref([

  { title: 'Carrot', text: 'Sweet carrot', tags: ['vegetables', 'orange'], id: 1 },

  { title: 'Potato', text: 'Tender potato', tags: ['vegetables', 'brown'], id: 2 },

  { title: 'Cucumber', text: 'Fresh cucumber', tags: ['vegetables', 'green'], id: 4 },

  { title: 'Tomato', text: 'Juicy tomato', tags: ['vegetables', 'red'], id: 5 },

  { title: 'Zucchini', text: 'Tender zucchini', tags: ['vegetables', 'green'], id: 6 },

  { title: 'Onion', text: 'Piquant onion', tags: ['vegetables', 'white'], id: 7 },

  { title: 'Pepper', text: 'Sweet pepper', tags: ['vegetables', 'red'], id: 8 },

  { title: 'Eggplant', text: 'Tender eggplant', tags: ['vegetables', 'purple'], id: 9 },

  { title: 'Beet', text: 'Sweet beet', tags: ['vegetables', 'red'], id: 10 },

  { title: 'Cabbage', text: 'Fresh cabbage', tags: ['vegetables', 'green'], id: 11 },

  { title: 'Apple', text: 'Juicy apple', tags: ['fruits', 'red'], id: 12 },

  { title: 'Banana', text: 'Sweet banana', tags: ['fruits', 'yellow'], id: 13 },

  { title: 'Orange', text: 'Juicy orange', tags: ['fruits', 'orange'], id: 14 },

  { title: 'Pear', text: 'Sweet pear', tags: ['fruits', 'green'], id: 15 },

  { title: 'Grape', text: 'Sweet grape', tags: ['fruits', 'purple'], id: 16 },

  { title: 'Lemon', text: 'Sour lemon', tags: ['fruits', 'yellow'], id: 17 },

  { title: 'Kiwi', text: 'Tender kiwi', tags: ['fruits', 'brown'], id: 18 },

  { title: 'Pineapple', text: 'Sweet pineapple', tags: ['fruits', 'yellow'], id: 19 },

  { title: 'Strawberry', text: 'Fragrant strawberry', tags: ['fruits', 'red'], id: 20 },

  { title: 'Mango', text: 'Exotic mango', tags: ['fruits', 'green'], id: 21 },

  { title: 'Chocolate', text: 'Sweet chocolate', tags: ['sweets', 'brown'], id: 22 },

  { title: 'Marshmallow', text: 'Fluffy marshmallow', tags: ['sweets', 'white'], id: 23 },

  { title: 'Cake', text: 'Sweet cake', tags: ['sweets', 'white'], id: 24 },

  { title: 'Lollipop', text: 'Sweet lollipop', tags: ['sweets', 'red'], id: 25 },

  { title: 'Cookie', text: 'Crispy cookie', tags: ['sweets', 'golden'], id: 26 },

  { title: 'Marzipan', text: 'Tender marzipan', tags: ['sweets', 'pink'], id: 27 },

  { title: 'Waffles', text: 'Crispy waffles', tags: ['sweets', 'beige'], id: 28 },

  { title: 'Caramel', text: 'Sweet caramel', tags: ['sweets', 'amber'], id: 29 },

  { title: 'Pastila', text: 'Sweet pastila', tags: ['sweets', 'white'], id: 30 },

  { title: 'Gingerbread', text: 'Fragrant gingerbread', tags: ['sweets', 'brown'], id: 31 },

  { title: 'Shrimp', text: 'Juicy shrimp', tags: ['seafood', 'pink'], id: 32 },

  { title: 'Mussels', text: 'Juicy mussels', tags: ['seafood', 'black'], id: 33 },

  { title: 'Squid', text: 'Juicy squid', tags: ['seafood', 'white'], id: 34 },

  { title: 'Lobster', text: 'Juicy lobster', tags: ['seafood', 'red'], id: 35 },

  { title: 'Scallops', text: 'Juicy scallops', tags: ['seafood', 'white'], id: 36 },

  { title: 'Crab', text: 'Juicy crab', tags: ['seafood', 'red'], id: 37 },

  { title: 'Salmon', text: 'Tender salmon', tags: ['seafood', 'orange'], id: 38 },

  { title: 'Tuna', text: 'Tender tuna', tags: ['seafood', 'pink'], id: 39 },

  { title: 'Mackerel', text: 'Juicy mackerel', tags: ['seafood', 'silver'], id: 40 },

  { title: 'Herring', text: 'Salty herring', tags: ['seafood', 'gray'], id: 41 }

]);

There is a data structure for filter list:

filtersMenu: ['vegetables', 'fruits', 'sweets', 'seafood'],

Need to create a code example with original v-combobox from vuetify 3 library with the following functionality:

1) search by keys in all three properties (filter-keys="title, text, tags");

2) in the dropdown list of objects display the prop text;

3) in the dropdown list of objects highlighting should work (highlight matches in text);

4) upon selection of an object, in the input field add the prop title;

5) when selecting an item from filtersMenu, add it to input and update the menu with suitable objects;

Note:

- implementation should be done using standard capabilities v-combobox (without combinations of different components);

- the search function should search in all three props (title, text, tags) regardless of case;

- highlighting must work

- the dropdown list should activate when an item from filtersMenu is added (previous value can be replaced)