将AlgoliaInstantSearch与Vue.js集成

搜索可能很难正确。 您想向您的客户提供实时结果，但要做到这一点，您要么需要一个棘手的服务器设置和大量数据库访问，要么需要一个专门用于搜索的服务器，或者在搜索之前将您用于搜索的所有内容上传到客户端......或者您可以只使用 Algolia InstantSearch。 （不，这不是或任何东西。）它是一种托管解决方案，可让您将想要索引的数据推送到他们的服务器。 从那里，您可以使用非常简单的组件向您的 Vue.js 应用程序添加实时搜索。

让我们来看看。

入门

使用 vue-cli 和 webpack-simple 模板启动一个简单的 Vue 项目。

接下来，安装 vue-instantsearch。

# Yarn
$ yarn add vue-instantsearch
# NPM
$ npm install vue-instantsearch --save

设置

现在，在 main.js 中启用插件。 这很简单。

main.js

import Vue from 'vue';
import App from './App.vue';
import InstantSearch from 'vue-instantsearch';

Vue.use(InstantSearch);

new Vue({
  template: '<router-view></router-view>'
})
.$mount('#app');

添加搜索

在 App.vue 中，让我们使用 Algolia 的最基本设置添加一个搜索部分。

vue-instantsearch 使用 react 风格的包装组件，将“真实”的可渲染组件包装在虚拟组件中，为他们的孩子提供数据和功能。

您需要的第一个是 ais-index。 这提供了 Algolia InstantSearch 查找结果所需的连接信息。 如果您在 Algolia 仪表板中设置了帐户和索引，则可以在您的 Algolia 仪表板中找到您的 app-id、api-key 和 index-name。 现在我们将只使用他们提供的演示凭据。

下一个组件是 ais-search-box。 它呈现（惊喜）一个搜索框。 （加上一个漂亮的小搜索和清除按钮。）

接下来是 ais-results 组件。 这个有点意思。 它使用 范围的插槽 允许您提供自己的搜索结果模板来呈现。 这意味着，如果您的搜索结果中有图像 URL，您只需输入 img 标记并设置 src 属性和繁荣，搜索结果与图像。

这里的最后一个组件是 ais-highlight。 它将在 <em></em> 标签中的结果对象上包装特定属性的匹配部分（由 attribute-name 指定）。 （可以自定义。）这意味着如果您搜索 Something 并且您的结果对象看起来像这样，

{
  "name": "The Book of Something"
}

结果输出将如下所示：<p>The book of <em>something</em><p>。 突出显示是一个令人沮丧的手动实现功能，因此它们为它提供开箱即用的支持真是太好了。

应用程序.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>

    <h2>Search For Stuff</h2>
    <ais-index
      app-id="latency"
      api-key="3d9875e51fbd20c7754e65422f7ce5e1"
      index-name="bestbuy"
    >
      <ais-search-box></ais-search-box>
      <ais-results>
        <template slot-scope="{ result }">
          <p>
            <ais-highlight :result="result" attribute-name="name"></ais-highlight>
          </p>
        </template>
      </ais-results>
    </ais-index>
  </div>
</template>
...

一旦你这样做了，你应该完成了！ 启动开发服务器，在搜索框中输入一些内容，然后立即查看结果！

现在剩下的就是将 API 密钥切换为您拥有的东西，尝试一些其他可用的组件，为它们设置样式，创建自定义组件，玩得开心！