How do I change route once a user starts typing?

I’m new to Vue.js (I started today) and have developed a basic application. I have a searchbox in the top left corner of my app that should be accessible on every route. I want the user to be moved to a ‘results’ route once they start typing.
I think I know how to change the route, but I don’t know how one should be detecting the type/search receive events so I can send them there.

If you have any examples of this behavior (route changes on search), please send me them. vue-instantsearch is very confusing for me unfortunately.

The whole of my vue-instantsearch code looks like this, along with all the styling I did following the </template> closing tag.

<ais-instant-search index-name="(index-name)" :search-client="searchClient">
    <ais-search-box placeholder="Search here…"/>

Hi Xevlon, in this case I would use a regular input (not the vue-instantsearch search box) then add en event listener to change the location on focus or on click.

document.querySelector('input[type=search]").addEventListener('click', event => {
    window.location.href = "/results-route";

I don’t know much about Vue.js, but I feel like I should be using events and controls more central to Vue, vue-router and vue-instantsearch, which would also include Vue’s router ‘push’ functions.

yeah, I had the native js version but you’re welcome to use vue and vue-router features to accomplish the same.
The point I was trying to make is : this behaviour need to be implemented outside Vue Instantsearch.

I got something working I think.

<ais-search-box @keydown.native="showResults"
export default {
  methods: {
    showResults() {
      if (this.$route.path !== '/search_results') {
        this.$router.push({ name: 'SearchResults' });

I’m still struggling to figure out how I can put Search results outside of this <ais-instant-search> form though. It doesn’t look pretty with them next to eachother and it’s becoming very difficult to organize like this.