Vue-instantsearch: How to clear result set with no query

[OGhawsi]

I am applying algolia vue-instantsearch into a project, I have set auto-search to false which works as expected. But I would like to hide all the results and clear everything when the user hits backspace or even clear the search box.
The problem is that all the records are brought back as if auto-search is =true.
Any way how can I achieve the expected result?

Thanks in advance.

[Haroenv]

Can you give a demo please, I'm not sure what you're expecting to happen.

The auto-search prop is to make sure that when you're loading a page, there will be results, if you put that to false, the _very first_ query will be prevented, none of the other ones.

I'd love to figure out what your usecase is!

[OGhawsi]

Same thing as on Algolia Community Forum, when user starts typing in the search box then the results are fetched.
Here is the link to the Forum and you can check out the search box.
https://discourse.algolia.com/?ref=communityHeader

Thanks @Haroenv

[Haroenv]

Aha, you want to create an autocomplete experience? You should be able to something like this:

1. create a custom component using the Component mixin like the ones in this library
2. use this new component to wrap around the results
3. in your new component's template, add the default slot only v-if="searchStore.query.length > 0"

Hope that makes sense!

[OGhawsi]

Yeah, that is exactly what I am looking for.
Worked for me
That would be really great if this feature is added out of the box,
I appreciate your help and work.
Thanks @Haroenv

[Haroenv]

We’ll take it in account, for now it’s simple enough, but we should probably add a guide 👍

[P373]

@Haroenv - I have the same use case and still cannot get this custom component to work even with your instructions (new to Vue). Are there any tutorials or walk throughs on how to get this custom component mixin with default slot to work? Best I have found thus far is: https://discourse.algolia.com/t/how-to-hide-results-when-the-query-is-empty-with-vue-instantsearch/2235/19.
Thanks in advance.

[Haroenv]

hey @P373, not sure what exactly you want, could you send the component you already have and what you want to achieve?

[P373]

Sure.
The demo site is massworkcomp.com,
When you go to the site right now, vue instantsearch / algolia queries the index immediately returning over 1800 results. I prefer to wait until the user types the first character for the results to query or display (similar to your response on Feb 2 of this same thread). I've tried implementing the custom component with v-if="searchStore.query.length > 0" but something breaks when I do. Am I forgetting to load a javascript library or a search store that enables the v-if functionality?

Here is my attempt at implementing the custom component in my view at the moment

<ais-index app-id="{{ config('scout.algolia.id') }}"
   api-key="{{ env('ALGOLIA_SEARCH') }}"
   :search-store="searchStore"
   index-name="wccodes">
.
.
.
<ais-input class="form-control form-control-lg my-0 py-1" placeholder="Search by industry or class code..." aria-label="Search"></ais-input>
.
.
.
<ais-stats></ais-stats>
.
.
.
      <ais-results v-show="searchStore.query.length > 0">
         <template scope="{ result }">
           <div>
             <a :href="'#"><p>Paragraph about the result</p>
           </div>
         </template>
      </ais-results>
      <ais-no-results>
        <p>We could not find...</p></ais-no-results>
     </ais-index>
.
.
.
    <script>
    import { createFromAlgoliaCredentials } from 'vue-instantsearch';
    const searchStore = createFromAlgoliaCredentials('{{ config('scout.algolia.id') }}', '{{ env('ALGOLIA_SEARCH') }}');
    export default {
      data() {
        return { searchStore };
      }
    };
    </script>

[Haroenv]

@P373, here's a sandbox with the code:

https://codesandbox.io/s/p5nop57170

Note that it's a different file, it's quite important to be able to use the search store