# 构建搜索界面

# 使用 InstantSearch.js

Algolia 的优秀团队构建并开源了 Instantsearch.js (opens new window)（以及它的 React (opens new window)、Vue (opens new window) 和 Angular (opens new window) 版本），这是一套开箱即用的 UI 组件集合，可用来快速构建交互式搜索体验。

在 Typesense，我们开发了一个适配器 (opens new window)，让你可以直接使用相同的 Instantsearch 组件，但将查询发送到 Typesense。本指南将带你了解如何使用 Instantsearch 和 typesense-instantsearch-adapter，仅用几行代码就能构建一个功能完整的搜索界面。

如果你更喜欢视频教程，这里有两个由社区成员 Zaiste (opens new window) 制作的视频，带你了解如何使用 Typesense 构建端到端的搜索体验：

# 使用包管理器

如果你已经在使用 npm 或 yarn 等包管理器，以下是向你的应用添加 Instantsearch 的方法：

# 快速入门指南

让我们从一个初始模板开始：

关于上述 npx create-instantsearch-app 命令的几个设置要点：

InstantSearch 模板：可以选择我们支持的任何 Web 库：InstantSearch.js、React、Vue 或 Angular
InstantSearch.js 版本：保持默认即可
应用 ID：可以是任意字符串 - 我们稍后会在指南中替换它
搜索 API 密钥：可以是任意字符串 - 我们稍后会替换为您的 Typesense 只读搜索 API 密钥
索引名称：Typesense 中的集合名称
要显示的属性：取消勾选所有选项（包括"动态部件"），按空格键操作 (此步骤很重要)。

现在让我们安装 Typesense InstantSearch 适配器，以便能将 InstantSearch 与 Typesense 后端结合使用：

要让 InstantSearch.js 使用 Typesense 适配器，打开 src/app.js 并修改 InstantSearch 的初始化方式，从：

改为：

我们实际上是使用适配器创建了一个 searchClient，并在初始化时将其传递给 instantsearch。

现在，您可以使用 InstantSearch 支持的任何部件来构建搜索界面。在本指南中，我们将添加一个搜索框和结果展示：

search.addWidgets([
  instantsearch.widgets.searchBox({
    container: '#searchbox',
  }),
  instantsearch.widgets.hits({
    container: '#hits',
    templates: {
      item: `
        <div>
          <img src="" align="left" alt="" />
          <div class="hit-name">
            {{#helpers.highlight}}{ "attribute": "title" }{{/helpers.highlight}}
          </div>
          <div class="hit-description">
            {{#helpers.highlight}}{ "attribute": "authors" }{{/helpers.highlight}}
          </div>
          <div class="hit-price">\$</div>
          <div class="hit-rating">评分: </div>
        </div>
      `,
    },
  }),
  instantsearch.widgets.pagination({
    container: '#pagination',
  }),
]);

search.start();

现在运行 npm start 启动开发服务器并查看应用。您现在应该拥有一个功能齐全的即时搜索界面，包含搜索框、随输入实时更新的结果和分页功能。

# 演示应用

这里有一个按照上述步骤实现的可运行应用仓库：https://github.com/typesense/typesense-instantsearch-demo (opens new window)。该仓库还包含快速启动本地 Typesense 服务器的命令（npm run typesenseServer）以及为示例中使用的书籍集合建立索引的命令（npm run populateTypesenseIndex）。

InstantSearch.js 还有对应的 React (opens new window)、Vue (opens new window) 和 Angular (opens new window) 版本。Typesense InstantSearch 适配器同样兼容这些框架。与上述情况类似，你只需将 searchClient 替换为 Typesense 适配器提供的版本即可。这些仓库中的其他使用说明无需额外修改即可直接使用。

# 不使用包管理器

如果你不想使用 npm/yarn，仍然可以通过 script 标签在纯 HTML 文件和 JavaScript 中直接使用 Instantsearch.js 和 typesense-instantsearch-adapter。

这里有一个演示应用展示了如何实现：https://github.com/typesense/typesense-instantsearch-demo-no-npm-yarn (opens new window)。

# 其他 UI 库

以下是 Typesense 的其他搜索 UI 库：

← 构建搜索应用系统要求 →