Sort in results with <ais-results>

Hello everyone,

we have implemented Algolia instantsearch with Vue, and we’ve absolutely loved the outcome so far. We wanted to implement a feature to only show some results based on where the user is on our page. For example if they are at the page with id 1, we only want to show results where the id is also 1. I’ve tried to do this with a simple v-if, but this only works after the user have entered a search query. Before it seems like the component is trying to show all of the records, without actually showing them, so it ends out with a lot of blank pages like this, where all the right results is at the last pages image

I’ve also tried creating my own component and basing the results on the searchStore, but it turns out the same way. Is there any way to achieve this, or does it need to be different indiced?

Thanks in advance for any help.

Hey, to get to the bottom of that use case first, why do you want people to paginate like that? It sounds a bit more like a menu on id, rather than real pagination. Is that something that could work for you?

Would like to see what use case you had in mind for this first

Hello Haroen,

first of all, thanks for your answer.

I’m doing a sportsgame where we have different games. Users can create leagues, and then the league belongs to a unique game. Every game has a page, and we’re going to show all leagues that belongs to that game. Therefore I wanted to fetch all leagues with a specific league_id. I’ve looked around the documentation, but haven’t been able to find a solution. Do you think this i doable?

So indeed, that should be done with a menu:

Basically you’d filter on that “page”, rather than using the pagination widget. Each “page” then contains the items for only that league. If you want pagination within that league it’s of course still possible with the pagination widget

does that make sense?

Yeah, it makes sense, and I have looked at the menu component. The thing is, we want to pre-select an item, and the user shouldn’t be able to change it in the view.

to pre-select an item, you can pass the argument query-parameters with filters="event_id:1" or something else preselected.