3

Hey I use Algolia on my new Laravel project but I get into this that Algolia displays all data that I have " Titel - description ".

What I want is only display result when I type something in the search box.

my Html Code 

<div id="app">
    <!-- Components will go here -->
    <ais-index app-id="{{ config('scout.algolia.id') }}"
               api-key="{{ env('ALGOLIA_SEARCH') }}"
               index-name="posts">

        <ais-search-box placeholder="Find products..."></ais-search-box>


        <ais-results>
            <template slot-scope="{ result }">
                <div>

                    <h4>@{{ result.progName }}</h4>
                    <ul>
                        <li>@{{ result.description }}</li>
                    </ul>
                </div>
            </template>
        </ais-results>

    </ais-index>
</div>

Post Model 

  <?php

  namespace App;

  use Illuminate\Database\Eloquent\Model;
  use Laravel\Scout\Searchable;

  class Post extends Model
     {
        //
         use Searchable;

     }
tyro
  • 1,428
  • 1
  • 17
  • 33
Ibrahim Hajjaj
  • 43
  • 4

1 Answers1

1

You should replace ais-results by a component which hides it based on the query. The component looks something like this: 

<!-- MyResults.vue -->
<template>
  <div v-if="query.length > 0">
    <slot name="header"></slot>
    <slot name="default" v-for="(result, index) in results" :result="result" :index="index">
      {{index}}. Result 'objectID': {{ result.objectID }}
    </slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import { Component } from 'vue-instantsearch';

export default {
  mixins: [Component],
  computed: {
    query() {
      return this.searchStore.query;
    },
    results() {
      return this.searchStore.results;
    },
  },
};
</script>

Then replace your usage for ais-results with your own my-results component:

<div id="app">
    <!-- Components will go here -->
    <ais-index app-id="{{ config('scout.algolia.id') }}"
               api-key="{{ env('ALGOLIA_SEARCH') }}"
               index-name="posts">

        <ais-search-box placeholder="Find products..."></ais-search-box>


        <my-results>
            <template slot-scope="{ result }">
                <div>

                    <h4>@{{ result.progName }}</h4>
                    <ul>
                        <li>@{{ result.description }}</li>
                    </ul>
                </div>
            </template>
        </my-results>

    </ais-index>
</div>
Haroen Viaene
  • 1,329
  • 18
  • 33
  • I did exactly like u said but i get a blank page without a search box! I have made a MyResults.vue in components, also in app.js file i updated the template Vue.component('My-Results', require('./components/MyResults.vue')); – Ibrahim Hajjaj Mar 08 '18 at 13:24
  • @IbrahimHajjaj can you make what you tried so far into a repository on GitHub which is easy to start and send an email to support@algolia.com? – Haroen Viaene Mar 08 '18 at 15:56