您想要为客户端提供实时结果,但要做到这一点,您需要一个复杂的服务器设置和大量数据库访问,或者仅用于搜索的专用服务器,或者您在搜索之前将您所使用的搜索内容上传到客户端......或者您可以使用Algolia InstantSearch(https://www.algolia.com/)。
让我们来看看。
开始的
使用 vue-cli和 webpack-simple模板启动一个简单的Vue项目。
接下来,安装vue-instantsearch。
1# Yarn
2$ yarn add vue-instantsearch
3# NPM
4$ npm install vue-instantsearch --save
设置
现在,在main.js中启用插件,它很简单。
1[label main.js]
2import Vue from 'vue';
3import App from './App.vue';
4import InstantSearch from 'vue-instantsearch';
5
6Vue.use(InstantSearch);
7
8new Vue({
9 template: '<router-view></router-view>'
10})
11.$mount('#app');
添加搜索
在App.vue中,让我们添加使用 Algolia 最基本的设置进行搜索的部分。
vue-instantsearch使用反应式包装组件,将真实可渲染的组件包装成提供数据和功能的虚拟组件。
你需要的第一个是ais-index。这提供了 Algolia InstantSearch 找到你的结果所需的连接信息. 如果你在 Algolia 仪表板上设置了帐户和索引,你可以在 Algolia 仪表板中找到你的app-id,api-key和index-name。
下一个组件是ais-search-box。它使(惊喜)一个搜索框(加上一个漂亮的小搜索和清晰的按钮)。
接下来是ais-results组件,这个组件有点有趣,它使用一个 scoped slot来允许您提供自己的搜索结果模板来渲染,这意味着如果您在搜索结果中有一个图像URL,您可以简单地扔一个img标签,并设置 src 属性和爆炸,搜索结果与图像。
这里的最后组件是is-highlight。它会将特定属性的匹配部分(由属性名称指定)包裹到您的结果对象中,在<em></em>标签中。
1{
2 "name": "The Book of Something"
3}
结果的输出将看起来像这样: <p>The book of <em>something</em><p>. 突出是手动实现的一个令人沮丧的功能,所以他们为它提供支持很棒。
1[label App.vue]
2<template>
3 <div id="app">
4 <img src="https://cdn.jsdelivr.net/gh/andsky/tutorials-images/./assets/logo.png">
5 <h1>{{ msg }}</h1>
6 <h2>Essential Links</h2>
7 <ul>
8 <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
9 <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
10 <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
11 <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
12 </ul>
13 <h2>Ecosystem</h2>
14 <ul>
15 <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
16 <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
17 <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
18 <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
19 </ul>
20
21 <h2>Search For Stuff</h2>
22 <ais-index
23 app-id="latency"
24 api-key="3d9875e51fbd20c7754e65422f7ce5e1"
25 index-name="bestbuy"
26 >
27 <ais-search-box></ais-search-box>
28 <ais-results>
29 <template slot-scope="{ result }">
30 <p>
31 <ais-highlight :result="result" attribute-name="name"></ais-highlight>
32 </p>
33 </template>
34 </ais-results>
35 </ais-index>
36 </div>
37</template>
38...
一旦你完成了,你应该完成了!启动开发者服务器,在搜索框中输入一些东西,并看到结果几乎立即呈现!
现在剩下的只是将API键切换到你自己的东西, 尝试一些其他可用的组件, 风格它们, 创建自定义组件,并有乐趣!