使用 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 手册中的代码。你们能给我指出正确的方向吗?
提前致谢。
最佳答案
下面是如何根据当前查询使用 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 - 如何在 Laravel + Vue 中隐藏空查询的结果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45845688/