Group results

[nfq]

Is there a way to group results?

For instance, our site has two main 'feeds' coming from the API: Pages and News entries. I'd like to visually render them like this (mockup below)

Any conceivable way to render something like this?

[trevoreyre]

Is this using the Vue or JS component?

[nfq]

The JS component!

[trevoreyre]

Honestly, I don't think there's a really great solution to this in the JS component. You can use the renderResult option to additionally render some grouping styles, but you'll have to find some way to store the condition for rendering the group outside of the autocomplete component, and check it in the renderResult function.

Here's a simple example that just renders a new group after every 3 results. https://codepen.io/trevoreyre/pen/JjGxLEm