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:

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

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

export default {
  components: { AisResults },
  mixins: [Component],
}
</script>

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:

<template>
<ais-index
    app-id="xxxx"
    api-key="xxxx"
    index-name="councils"
>
<ais-input placeholder="Search for council"></ais-input>
<ais-stats></ais-stats>
<ais-results>
  <template slot-scope="{ result }">
    <h5>
        <ais-highlight :result="result" v-model="result" attribute-name="name" :query="query"></ais-highlight>
    </h5>
  </template>
   </ais-results>
 </ais-index>
</template>

<script>
export default {
  
}
   </script>

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: https://github.com/algolia/vue-instantsearch/issues/388 (sandbox direct: https://codesandbox.io/s/p5nop57170)

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: https://laravel.com/docs/5.6/frontend#writing-vue-components

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 (https://github.com/algolia/vue-instantsearch/issues/402)

  <ais-index app-id="{{ config('scout.algolia.id') }}"
             api-key="{{ env('ALGOLIA_SEARCH') }}"
             index-name="myindex"
             :auto-search="false"
             >

Thank you again

1 Like

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