How To Programmatically Clear Algolia Search in Vue

Algolia is a powerful AI-powered search tool with built-in VueJS support. It lets you quickly give your project instant search and auto-completion capability. While Algolia is simple to set up, it can be complicated to customize. One issue you may run into is not being able to clear the search query after clicking a result. No worries, we’re here to help. Here is how to clear the Algolia search in Vue programmatically.

The Problem

If your project route-view is separate from the header with your Algolia search box, you may run into an issue where your search query doesn’t clear after clicking a result. This will leave you with a bad user experience where your results dropdown will stay open after the page has navigated away. The Algolia team has not provided a proper solution for this issue besides using a component that allows the user to clear the search box manually. Luckily we have a clean workaround to help.  

How To Programmatically Clear Algolia Search in Vue

To do a programmatic query clear on the Algolia search inside Vue, we perform a form reset on the search box itself. Here is the full solution:

<template>
    <ais-instant-search :search-client="searchClient" index-name="yourIndex">
        <ais-search-box id="search" />
        <ais-state-results>
            <template v-slot="{ state: { query } }">
                <ais-hits v-show="query.length > 0">
                    <template v-slot:item="{ item }">
                        <router-link
                            @click="clearQuery"
                            :to="{ name: 'YourRoute', params: { id: item.someID } }"
                        >
                            <h3>{{ item.title }}</h3>
                        </router-link>
                    </template>
                </ais-hits>
            </template>
        </ais-state-results>
    </ais-instant-search>
</template>

<script>
import algoliasearch from 'algoliasearch/lite'
import 'instantsearch.css/themes/satellite-min.css'

export default {
    data() {
        return {
            searchClient: algoliasearch('APPID', 'APPKEY'),
        }
    },
    methods: {
        clearQuery() {
            document.querySelector('#search form').reset()
        },
    },
}
</script>


      
        Copied  
        
      
    

In this code, we first assign an ID to our search box. The ID can be put on any component in the Algolia hierarchy, but the search box itself makes the most sense. 

<ais-search-box id="search" />
      
        Copied  
        
      
    

Next, we add a click handler to the result hits. The click handler will call our clearQuery() method.

<router-link @click="clearQuery" :to="{ name: 'YourRoute', params: { id: item.someID } }">
    <h3>{{ item.title }}</h3>
</router-link>
      
        Copied  
        
      
    

Inside the clearQuery() method, we use the standard javascript DOM methods to grab the search box form and reset it. Since the form is nested within the Algolia search box components, we must also nest the selector. 

methods: {
  clearQuery() {
    document.querySelector('#search form').reset()
  },
}
      
        Copied  
        
      
    

If you have multiple search boxes on your page, you can add a class instead of an id and then loop through all the classes using querySelectorAll and forEach. 

let searchboxes = document.querySelectorAll('.searchboxes form');
searchboxes.forEach(el => el.reset());
      
        Copied  
        
      
    

While this isn’t a proper reactive solution, it solves the problem nicely. If you have a cleaner or more direct solution, please feel free to reach out. 

Check out our Javascript section for more helpful guides and tips on Javascript coding.