search

darrenjennings / vue-autosuggest

🔍 Vue autosuggest component.
https://darrenjennings.github.io/vue-autosuggest
MIT License
621 stars 91 forks source link

How do i use sections? #197

Closed irosgrim closed 4 years ago

irosgrim commented 4 years ago

Hello, This component is awesome. Very good work. I would like to divide the suggestions in sections. Basically a header for each list. I tried to follow the examples but i did not manage to get it working.

I have the array of objects with this structure: [{name: SectionName, data: [array of suggestions]}, {name: SectionName, data: [array of suggestions]},...].

Then in the component: `

` The content is dynamic and the name is not known before hand.

I would greatly appreciate if you could help me with this. Thank you.

darrenjennings commented 4 years ago

Are you trying to accomplish the same as the demo? https://darrenjennings.github.io/vue-autosuggest/

The source for this demo is here:https://github.com/darrenjennings/vue-autosuggest/blob/master/docs/App.vue

Maybe you are missing the "label" in each section.

irosgrim commented 4 years ago

But do i need to add the sectionConfigs? I tried to do something similar to the example above i didn't use sectionConfigs. How do i dynamically create those labels?

darrenjennings commented 4 years ago

the sectionConfig prop is like global static config, however we support it based on data source. So in that example, the filteredOptions are being funnelled into the default sectionConfig https://github.com/darrenjennings/vue-autosuggest/blob/master/docs/App.vue#L147 but then applying a unique label https://github.com/darrenjennings/vue-autosuggest/blob/master/docs/App.vue#L148.

irosgrim commented 4 years ago

Wow, that works. Thank you very much for taking the time to explain it. Best regards