Click the result you want and then store in the input to use

Hi all,

I’ve just easily implemented the vue-instant search which works great, however I wish to know the following as I am unable to find reference within the documentation.

I only want the results to show when a user start typing (currently shows them all)
I want the result to be a clickable item to add it to the input, so I can later use this as a POST request from within my form.

Can someone either help/advise on this or point my in the right direction to where I can find this info out .
Many thanks.

I’m not completely sure what you mean with the form part of the question, but hiding the results when nothing isn’t typed can be done by making a custom component like this:

  <ais-results v-show="searchStore.query.length > 0"></ais-results>

import { Results as AisResults, Component } from 'vue-instantsearch';

export default {
  components: { AisResults },
  mixins: [Component],

Thanks for this, the form part thing. SO when I type and it returns the result, I want to be able to click that result name and it then stores it within the input.

For that you’d want to change that wrapper I wrote to also include @click handlers of the results do something like this.searchStore.query = name where you’d get the name from the individual result.

Does that make sense?

1 Like

I think so yes, I’ll give it a try, thanks for your help.

1 Like

The first wrapper you replied with doesn’t render. Maybe because what I have is already a component perhaps?

Here’s what I had before:

<ais-input placeholder="Search for council"></ais-input>
  <template slot-scope="{ result }">
        <ais-highlight :result="result" v-model="result" attribute-name="name" :query="query"></ais-highlight>

export default {

The one I listed should be in it’s own file, is that what you did? You should then use that component in your main file inside the “ais-index”

I’m using Laravel and therefore the import statement is within my main app.js. Then I created the above component and called <council-search></council-search> from my HTML

Istables1, I have the same use case (with Laravel) and have been trying to get this to work for a month or so. Haroen previously shared this sandbox with me - found towards the bottom: (sandbox direct:

I’m having the same issue where when I include a piece of the code then nothing renders. Were you able to figure out how to get vue-instantsearch to play nicely with your use case?

I plan on reviewing it again with someone with more experience with JavaScript.

Note that in Laravel you can use .vue components as well, this will make your experience a lot more smooth, rather than doing it in blade templates:

This is a component and not within blade hence the call to <council-search></council-search> component.

I’m still non the wiser on this, but hope to review it later this week.

Thank you for clarifying! I plan on learning more about writing vue components.

After writing some custom javascript to hide results, I found that I can add :auto-search=“false” to hide results on a blade template. (but it won’t hide results when you hit backspace) I also noted maybe this is something you’re working on for the next release (

  <ais-index app-id="{{ config('') }}"
             api-key="{{ env('ALGOLIA_SEARCH') }}"

Thank you again

1 Like

That’s a nice to know, will try that out.