Как настроить Algolia так, чтобы он не возвращал никаких результатов, если запрос пуст Laravel & Vue Instant Search

Привет, я использую Algolia в своем новом проекте Laravel, но я понимаю, что Algolia отображает все данные, которые у меня есть «Titel - description».

Я хочу отображать результат только тогда, когда я что-то ввожу в поле поиска.

мой HTML-код

<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>

Почтовая модель

  <?php

  namespace App;

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

  class Post extends Model
     {
        //
         use Searchable;

     }

laravel laravel-5 algolia laravel-scout
person Ibrahim Hajjaj    schedule 02.03.2018    source источник
comment
Спасибо за вопрос, мы добавили задачу в проект: github.com/algolia/vue- мгновенный поиск/вопросы/402   -  person Julien Bourdeau    schedule 07.03.2018
comment
я хочу получить ответ   -  person Ibrahim Hajjaj    schedule 07.03.2018

Ответы (1)


arrow_upward
2
arrow_downward

Вы должны заменить ais-results компонентом, который скрывает его на основе запроса. Компонент выглядит примерно так:

<!-- 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>

Затем замените использование ais-results своим собственным компонентом my-results:

<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>
person Haroen Viaene    schedule 07.03.2018
comment
Я сделал точно так, как вы сказали, но я получаю пустую страницу без окна поиска! Я сделал MyResults.vue в компонентах, также в файле app.js я обновил шаблон Vue.component('My-Results', require('./components/MyResults.vue')); - person Ibrahim Hajjaj; 08.03.2018
comment
@IbrahimHajjaj, можете ли вы превратить то, что вы пробовали до сих пор, в репозиторий на GitHub, который легко запустить и отправить электронное письмо на [email protected]? - person Haroen Viaene; 08.03.2018