Use search results in ais-instant-search

[ThisIsMyFavouriteJar]

Hello all,

Currently I have a filter in my ais-instant-search defined as follows:

<template>
<ais-instant-search :search-client="searchClient" index-name="products">

{{ This-Is-Where-I-Want-Access-To-Search-Results }} 

<div id="brands-filter" v-if="????">
<h3 class="catalog-category font-semibold mb-1">Brands:</h3>
     <div>
           <ais-refinement-list operator="or" attribute="brand" :limit="5" :show-more="true" >
                 <template></template>
           </ais-refinement-list>
    </div>                                       
</div>

..........

What I want to do is hide the div with id brands-filter based on the search results returned. So if no brands are returned at all in FacetsDistribution this entire div can be hidden. To be able to do this I need access to the search results, however, I do not seem to able to retrieve the search results in such a way that I can fill the v-if in the sample above.

Any suggestions about how I can access the search results would be really helpful!

Cheers!

[bidoubiwa]

Hello @ThisIsMyFavouriteJar

You can map on all search results using transformItems. Here is the documentation about it.

In your case for example you could do something like:

<template>
  <!-- ... -->
  <ais-hits :transform-items="transformItems" />
</template>

In your methods field

transformItems(items) {
      const brands = items.find((item) => item.brand && item.brand.length > 0)
      if (brands.length > 0) {
        // hide your component
      }
      return items
    },

[ThisIsMyFavouriteJar]

Hi @bidoubiwa , thank you for your answer! Actually I tried this method, but somehow it appears that as soon as I change the necessary variables (e.g. this.showBrands) that Instantsearch automatically makes another request without any filters, thereby immediately negating the change to this.showBrands.

I guess my problem / question is now as follows: How to call a function in 'methods' (where instantMeiliSearch is defined in the data() ) without making another call to Meilisearch?

Hope my answer is clear, and appreciate your help!

[ThisIsMyFavouriteJar]

After some searching I found this: https://stackoverflow.com/questions/57193330/updating-unrelated-vue-js-variable-causing-input-values-in-template-to-disappear

Turns out that Vue re-renders everything once a variable is updated, in my case causing all original inputs to disappear. Seems to me that this makes it rather hard to use transformItems to get the necessary values......

Edit: It seems the reason everything is rendering again has to do with the way I update my variables. Perhaps this is the way to go after all!

[bidoubiwa]

Hello @ThisIsMyFavouriteJar

Did you manage to make it work ?

[ThisIsMyFavouriteJar]

Hi @bidoubiwa , unfortunately not yet. The problem seems to be that changing the variable to hide the filter title causes vue to rerender, resetting all search criteria.... Not sure if I am doing things wrong, or if this is just the nature of vue. If you managed to make this work in an earlier project of yours it would be great to hear how you did it!

[bidoubiwa]

@ThisIsMyFavouriteJar

Is your code on an open repo? In case not could you share your instantSearch configuration through a gist?