Instantsearch, VueJS and Query Limits

Hi,

I’m trying to use InstantSearch with VueJS but I don’t want to initiate the query on page load as it’s just a searchbox in the top navigation bar. Everything works well, but as soon as I want to implement the query limit (if query is under 1 character, then don’t do the search query) the ais-search-box disappears.

Here is some of my code:

<ais-instant-search :search-client="searchClient" index-name="users" :search-function="searchFunction">

   <ais-search-box
        :placeholder="$t('administration.admin.app_reported_users.search_input_placeholder')"
        :class-names="{
            'ais-SearchBox-input': 'form-control',
            'ais-SearchBox-submitIcon': 'text-muted',
         }"
    />
    
</ais-instant-search>

As you can see, I’m using the :search-function as described in the documentation: https://www.algolia.com/doc/api-reference/widgets/instantsearch/vue/

Here is the actual JS code:

data() {
    return {
        searchClient: algoliasearch(
            'APP_ID',
            'API_KEY'
        ),
        searchFunction(helper) {
            if (helper.state.query) {
                helper.search();
            }
        },
    };
},

As soon as I’m using the “searchFunction” thing, the ais-search-box disappear. After some investigation, I think it’s because “helper.search()” is not called, but that’s totally the point, I want it to be called after the user have inputted at least one character, but for that he needs the ais-search-box to be loaded, otherwise he can’t write anything

What Am I doing wrong?

Thanks :slight_smile:
Steven

1 Like

Hi,

I think you will want to look at this part of the documentation: https://www.algolia.com/doc/guides/building-search-ui/going-further/conditional-requests/vue/

Here is the relevant example for your use case:

const searchClient = {
  search(requests) {
    if (requests.every(({ params }) => !params.query)) {
      return Promise.resolve({
        results: requests.map(() => ({
          hits: [],
          nbHits: 0,
          nbPages: 0,
          processingTimeMS: 0,
        })),
      });
    }

    return algoliaClient.search(requests);
  },
};

You were right that you need to “fake” the results. This is what we do here in the search function.

I hope that helps.

1 Like

Hi,

Thanks! That’s exactly what I was looking for, works like a charm :slight_smile:
I’ve searched for hours but I’ve missed this part of the documentation.

Have a nice day,
Steven

1 Like