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)
