Zrealizować funkcjonalność za pomocą standardowych możliwości v-combobox.
Jest taka struktura danych obiektów:
const items = ref([
{ title: 'Marchew', text: 'Słodka marchew', tags: ['warzywa', 'pomarańczowy'], id: 1 },
{ title: 'Ziemniak', text: 'Delikatny ziemniak', tags: ['warzywa', 'brązowy'], id: 2 },
{ title: 'Ogórek', text: 'Świeży ogórek', tags: ['warzywa', 'zielony'], id: 4 },
{ title: 'Pomidor', text: 'Soczysty pomidor', tags: ['warzywa', 'czerwony'], id: 5 },
{ title: 'Cukinia', text: 'Delikatna cukinia', tags: ['warzywa', 'zielony'], id: 6 },
{ title: 'Cebula', text: 'Pikantna cebula', tags: ['warzywa', 'biały'], id: 7 },
{ title: 'Papryka', text: 'Słodka papryka', tags: ['warzywa', 'czerwony'], id: 8 },
{ title: 'Bakłażan', text: 'Delikatny bakłażan', tags: ['warzywa', 'fioletowy'], id: 9 },
{ title: 'Burak', text: 'Słodki burak', tags: ['warzywa', 'czerwony'], id: 10 },
{ title: 'Kapusta', text: 'Świeża kapusta', tags: ['warzywa', 'zielony'], id: 11 },
{ title: 'Jabłko', text: 'Soczyste jabłko', tags: ['owoce', 'czerwony'], id: 12 },
{ title: 'Banan', text: 'Słodki banan', tags: ['owoce', 'żółty'], id: 13 },
{ title: 'Pomarańcza', text: 'Soczysta pomarańcza', tags: ['owoce', 'pomarańczowy'], id: 14 },
{ title: 'Gruszka', text: 'Słodka gruszka', tags: ['owoce', 'zielony'], id: 15 },
{ title: 'Winogrono', text: 'Słodkie winogrono', tags: ['owoce', 'fioletowy'], id: 16 },
{ title: 'Cytryna', text: 'Kwaśna cytryna', tags: ['owoce', 'żółty'], id: 17 },
{ title: 'Kiwi', text: 'Delikatne kiwi', tags: ['owoce', 'brązowy'], id: 18 },
{ title: 'Ananas', text: 'Słodki ananas', tags: ['owoce', 'żółty'], id: 19 },
{ title: 'Truskawka', text: 'Aromatyczna truskawka', tags: ['owoce', 'czerwony'], id: 20 },
{ title: 'Mango', text: 'Egzotyczne mango', tags: ['owoce', 'zielony'], id: 21 },
{ title: 'Czekolada', text: 'Słodka czekolada', tags: ['słodycze', 'brązowy'], id: 22 },
{ title: 'Pianka', text: 'Powietrzna pianka', tags: ['słodycze', 'biały'], id: 23 },
{ title: 'Tort', text: 'Słodki tort', tags: ['słodycze', 'biały'], id: 24 },
{ title: 'Lizak', text: 'Słodki lizak', tags: ['słodycze', 'czerwony'], id: 25 },
{ title: 'Ciastko', text: 'Chrupiące ciastko', tags: ['słodycze', 'złoty'], id: 26 },
{ title: 'Marshmallow', text: 'Delikatne marshmallow', tags: ['słodycze', 'różowy'], id: 27 },
{ title: 'Wafle', text: 'Chrupiące wafle', tags: ['słodycze', 'beżowy'], id: 28 },
{ title: 'Karmel', text: 'Słodki karmel', tags: ['słodycze', 'bursztynowy'], id: 29 },
{ title: 'Pastylka', text: 'Słodka pastylka', tags: ['słodycze', 'biały'], id: 30 },
{ title: 'Piernik', text: 'Aromatyczny piernik', tags: ['słodycze', 'brązowy'], id: 31 },
{ title: 'Krewetki', text: 'Soczyste krewetki', tags: ['owoce morza', 'różowy'], id: 32 },
{ title: 'Małże', text: 'Soczyste małże', tags: ['owoce morza', 'czarny'], id: 33 },
{ title: 'Kałamarnice', text: 'Soczyste kałamarnice', tags: ['owoce morza', 'biały'], id: 34 },
{ title: 'Homar', text: 'Soczysty homar', tags: ['owoce morza', 'czerwony'], id: 35 },
{ title: 'Przegrzebki', text: 'Soczyste przegrzebki', tags: ['owoce morza', 'biały'], id: 36 },
{ title: 'Krab', text: 'Soczysty krab', tags: ['owoce morza', 'czerwony'], id: 37 },
{ title: 'Łosoś', text: 'Delikatny łosoś', tags: ['owoce morza', 'pomarańczowy'], id: 38 },
{ title: 'Tuńczyk', text: 'Delikatny tuńczyk', tags: ['owoce morza', 'różowy'], id: 39 },
{ title: 'Makrela', text: 'Soczysta makrela', tags: ['owoce morza', 'srebrny'], id: 40 },
{ title: 'Śledź', text: 'Słony śledź', tags: ['owoce morza', 'szary'], id: 41 }
]);
Jest taka struktura danych dla listy filtrów:
filtersMenu: ['warzywa', 'owoce', 'słodycze', 'owoce morza'],
Trzeba zrobić przykład kodu z oryginalnym v-combobox z biblioteki vuetify 3 z taką funkcjonalnością:
1) szukać po kluczach po wszystkich trzech właściwościach (filter-keys="title, text, tags");
2) w rozwijanej liście obiektów wyświetlać props text;
3) w rozwijanej liście obiektów ma działać podświetlenie (podświetlać dopasowania w text);
4) przy wyborze obiektu, w polu input dodawać props title;
5) przy wyborze elementu z filtersMenu, dodawać go w input oraz aktualizować menu z pasującymi obiektami;
Zwrócić uwagę:
- zrealizować trzeba standardowymi możliwościami v-combobox (bez kombinacji z różnych komponentów);
- funkcja wyszukiwania ma szukać po wszystkich trzech propsach (title, text, tags) niezależnie od wielkości liter;
- podświetlenie ma działać
- rozwijana lista ma aktywować się, gdy dodano element z filtersMenu (poprzednia wartość może być zastępowana)
