Modify all results ais-instant-search


I am currently upgrading vue-instantSearch to 2.0 so I’m new to these widgets. I’m using ais-instant-search and ais-hits on my page but I need to be able to modify all results in a method. Transform-items only gives me access to the current htis (set by the hits-per-page by the ais-configure)

So again, I’m trying to modify ALL results from ais-instant-search.

Thank You!!

Hey there @mjaimes, welcome to the community! I understand you’re using the transform-items prop to modify your hits. It’s true that this works on a page by page basis – could you explain your use case a bit more so we can understand what you’re after here or if we’re missing some key functionality?

If users are paginating through their results, shouldn’t it be enough to modify them on a page by page basis?

If you could reproduce what you’ve tried in a Codesandbox (just the minimum amount of code necessary to reproduce the issue) and explain what you’re going for here, it would be super helpful. :pray: This Vue InstantSearch template should be a good start.

Hi Maria,

Thank you for a quick reply! I need to inject some data to every item and then be able to sort by that data. I can do this on a per page basis but the sorting would be off as soon as someone clicks next page. Ideally I would be able to inject my data to all results before page loads.

Does this make sense?

Thank You!

Can you precise what you mean by “data”? Sorting items based on custom data on the frontend seems like an anti-pattern because search engines are made for this purpose.

Sorry for the confusion, in its simplest form of the question: Is there a way to modify the entire results and not just the hits?

Hi @mjaimes, Can you give an example of how you are trying to modify the results?

Hi sure,
I have this hits widget.



Then in the methods I have something like.

      this.helperResults = items;
      this.helperResults.forEach((title) => {
        title.progressbar = this.titleHasProgress(;
      return this.helperResults

That gives every item in hits a progressbar number. I then have a custom sort feature that sorts by Completion Status using that progressbar number.

My issue is that my sort would only work on a per page basis because the hits only gives me access to the hits per page. I’m trying to find a way to modify ALL RESULTS.

Let me know if this doesn’t make sense.

Thank You!!

Hi @mjaimes, thanks so much for the example!

Indeed, as @francoischalifour mentioned, this is a bit of an anti-pattern for us. We make search as quick as possible by sorting results at indexing time as much as possible (rather than query time.) This way, when a query is run, results are pre-sorted to an extent and we can process the request within a matter of milliseconds.

You can do this by indexing attributes you would like to sort by (e.g. completion status) and then setting that attribute as either a custom ranking or sort by attribute, depending on exactly what you are going for. Would you be able to index/update the completion status of each item rather than grabbing this value on the front-end?

If you need to do this on the client-side (e.g. it varies for each client), it would probably be best to use the browse method rather than the search method, since this will allow you to grab all of your records, not just ones on a certain page.

The downside is that this is not compatible with our InstantSearch components out-of-the-box, and you would need to build out a lot of UI functionalities that they provide.

I hope this explains how we intend our system work and that one of the suggestions is do-able for you. Let us know if you have any further questions.