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 ***@***.***> 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 <#402 (comment)>, 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