Question

用Vue运行Laravel Scout + Algolia。一切正常，搜索很快很快。但是我想在空查询上隐藏结果而不是显示整个索引。

Algolia提供此解决方案：

var search = instantsearch({
  [...],
  searchFunction: function(helper) {
    var searchResults = $('.search-results');
    if (helper.state.query === '') {
      searchResults.hide();
      return;
    }
    helper.search();
    searchResults.show();
  }
}

这是我的搜索：

//search.blade.php
    <ais-index app-id="{{ config('scout.algolia.id') }}"
               api-key="{{ env('ALGOLIA_SEARCH') }}"
               index-name="dev_users">
        <ais-search-box placeholder="Zoek een gebruiker" :autofocus="true"></ais-search-box>
        <ais-results></ais-results>
<script>
    new Vue({
        el: "#search",
    })
</script>

这是我的app.js

import InstantSearch from 'vue-instantsearch';
Vue.use(InstantSearch);

我无法弄清楚如何实施Algolia手册中的代码。你们能指出我正确的方向吗？

提前致谢。

Answer 1

以下是基于当前查询使用Vue InstantSearch隐藏结果的方法：

<template>
  <ais-index :search-store="searchStore">
    <ais-input></ais-input>
    <results v-show="searchStore.query.length > 0"></results>
  </ais-index>
</template>

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

const searchStore = createFromAlgoliaCredentials('<appId>', '<apiKey>');

export default {
  data() {
    searchStore
  }
}
</script>

如何在Laravel + Vue中的空查询中隐藏结果？

1 个答案: