Vue-instantsearch: Do not load results of page load (empty query)

[julienbourdeau]

Do you want to request a feature or report a bug?

feature

Bug: What is the current behavior?

Currently, there is no easy way to hide results on page load (empty query). I believe this is pretty common request.

Bug: What is the expected behavior?

The page should not display results, but it also shouldn't load data. If you sinmple display: none images and such will be fetched.

Bug: What is the proposed solution?

Either add a parameter to <ais-results> for example or at least document how to achieve it (as I believe this is not straight forward).

Related question: https://stackoverflow.com/questions/49069732/how-do-i-set-algolia-to-not-return-any-results-if-the-query-is-blank-laravel-v

[ibrahimhajjaj]

I still need answer !!

[Haroenv]

Hey @ibrahimhajjaj, I was looking at your repository, but since it doesn't have the build tools included it takes some more time to reproduce, don't worry though; we're on it

[ibrahimhajjaj]

okay that's cool

On Mon, Mar 12, 2018 at 10:36 AM, Haroen Viaene [e-mail]
wrote:

Hey @ibrahimhajjaj https://github.com/ibrahimhajjaj, I was looking at
your repository, but since it doesn't have the build tools included it
takes some more time to reproduce, don't worry though; we're on it

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/algolia/vue-instantsearch/issues/402#issuecomment-372230135,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AWGrWktbYQrd9s_faY7XATh0Zi2zMYOWks5tdjOkgaJpZM4SgDjR
.

[cschweda]

I have the same question: is there a way to render the search box but not automatically display the results when the search page loads?

Essentially, I don't want results displayed until the user actually starts typing in the box.

I can hide the results, but I'm not clear on how I trap the first keypress in the search box. Checking for v-on:keyup doesn't work.

Is there an easy way to simply not render any results until the user starts to actually type?

EDIT: The SO link in the OPs original post works. That's what I was looking for. Thanks.

[fractalf]

@cschweda
Sounds like what you _really_ want is to set auto-search to false like described in the docs here https://community.algolia.com/vue-instantsearch/components/index.html

Here's an example of my setup

<ais-index
    :app-id="config.appId"
    :api-key="config.apiKey"
    :index-name="index.name"
    :query-parameters="{ query, hitsPerPage: index.hits }"
    :auto-search="false"
>

^ this will not fire a request on page load. It will however fire a request if the query is blanked out, which brings me to...

@Haroenv
A common use case is not to make a query request _at all_ when the query is blank. Would love an option for this.

..I've been looking roughly through the code and can't seem to inject this feature without doing a core hack (which I really don't want to). I think I can also solve this by having a local query variable which can be empty and only mutate the store's query when it's not blank. My current solution however is not to show the result on a blank query, which is easy and it works, but it's not really optimized

[Haroenv]

Hey @fractalf, I understand that this is an issue, and we have a solution for this use case for the next major version of Vue InstantSearch (using searchFunction in which you have full freedom in which cases to send a query and in which not to). As you said, right now doing this would be possible by editing the search-box (copying it and using it in your own project), and using searchStore.stop / start whenever necessary.

I hope that makes sense

[fractalf]

@Haroenv
Great stuff! You guys are pumping out code :)

I managed a solution (without a core hack) by combining the suggestion from that stackoverflow link with ith a local query that only change the "algolia" query when not empty. Until the next version comes out, this is good enough.

[Haroenv]

This is now possible in v2 using: https://v2--vue-instantsearch.netlify.com/advanced/conditional-requests.html