Is it possible to show a data tree structure with Autocomplete?

[Dide]

The AutoComplete component is exactly what I need, with it being an input field offering suggestions based on the typed text. However, I have a nested data structure like

const nestedData = [

{

text: 'Furniture',

items: [{ text: 'Tables & Chairs' }, { text: 'Sofas' }, { text: 'Occasional Furniture' }],

},

{

text: 'Decor',

items: [{ text: 'Bed Linen' }, { text: 'Curtains & Blinds' }, { text: 'Carpets' }],

},

];

 

Is it possible to show this? Maybe using the DropdownTree or TreeView component with `itemRender`?

[Dide]

Actually I will have 3 levels of nested data:

const nestedData = [
{
text: 'Furniture',
items: [{ text: 'Tables & Chairs', items: [{text: 'Pilows'}] }, { text: 'Sofas', items: [{text: 'Blankets'}] }, { text: 'Occasional Furniture' }],
},
{
text: 'Decor',
items: [{ text: 'Bed Linen', items: [{text: 'Rugs'}] }, { text: 'Curtains & Blinds' }, { text: 'Carpets' }],
},
];

[Konstantin Dikov]

Hello Dide,

The AutoComplete component works with flat data only, so in order to use it you can flat the data prior to binding it to the component.

If you want to keep the hierarchical structure you can use a DropDownTree with filtering and maybe expand all items:

• https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdowntree/filtering/

And here is one way of expanding all items initially (the second one is to add "expanded: true" to all items):

• https://stackblitz.com/edit/react-9yswtv?file=app%2Fmain.jsx

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik