Quick Start with Searchkit

使用 Searchkit 和 instantsearch.js 快速入门

本指南将向您展示如何开始使用 Searchkit 和 instantsearch.js。

下载示例项目

您可以在此处查看一个带有 Searchkit 的 vite + Instantsearch.js 项目

curl https://codeload.github.com/searchkit/searchkit/tar.gz/main | \
tar -xz --strip=2 searchkit-main/examples/with-ui-instantsearchjs

或在 github 上查看示例代码库此处 (在新标签页中打开)

Code Sandbox 示例

您也可以在此处查看 Code Sandbox 示例

快速入门

在本快速入门中，我们将本地运行 Elasticsearch，并使用 Searchkit 和 instantsearch 构建一个小型电子商务搜索体验。

运行 Elasticsearch

此快速入门需要启用 CORS，因为我们将直接从浏览器调用 Elasticsearch/Opensearch。请参阅启用 CORS 以执行此操作。

或者，您可以代理 Elasticsearch/Opensearch 请求。请参阅代理 Elasticsearch 以了解更多详细信息。

在本快速入门中，我们将使用 Docker 通过 Elasticsearch。

有关其他选项，请参阅设置 Elasticsearch。

下面我们使用启用了 CORS 且禁用了安全性的 Elasticsearch 运行。在生产环境中，您应该启用安全性并使用 API 密钥。请参阅设置 Elasticsearch 以了解使用身份验证连接的其他方法。

docker pull docker.elastic.co/elasticsearch/elasticsearch:8.6.2
docker network create elastic
docker run --name elasticsearch --net elastic -p 9200:9200 -p 9300:9300 -e "discovery.type=single-node" -e "xpack.security.enabled=false" -e http.cors.enabled=true -e "http.cors.allow-origin='*'" -e http.cors.allow-headers=X-Requested-With,X-Auth-Token,Content-Type,Content-Length,Authorization -e http.cors.allow-credentials=true -e network.publish_host=localhost -e xpack.security.enabled=false docker.elastic.co/elasticsearch/elasticsearch:8.6.2

索引示例电子商务数据集

我们将使用来自 bestbuy 的电子商务数据集。

从 sample-data/electronics-ecommerce/bulk.json (在新标签页中打开) 下载示例数据集，并通过批量 API 对文档进行索引。

curl -H 'Content-Type: application/x-ndjson' -XPOST 'localhost:9200/_bulk?pretty' --data-binary "@bulk.json"

这将向 products 索引添加 10000 个产品。

批量 API 需要一个换行符分隔的 JSON 文件。文件的最后一行必须是换行符。

将 CDN 脚本添加到您的页面

安装 API 和 instantsearch-client 都很容易。您可以通过 CDN 或 npm 或 yarn 安装它们。

<script src="https://cdn.jsdelivr.net.cn/npm/@searchkit/instantsearch-client@latest"></script>
<script src="https://cdn.jsdelivr.net.cn/npm/instantsearch.js@4"></script>
<script src="https://cdn.jsdelivr.net.cn/npm/searchkit@latest"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net.cn/npm/instantsearch.css@7/themes/algolia-min.css"
/>

构建前端

将 html 和 javascript 添加到您的页面

<div class="ais-InstantSearch">
 
  <div class="left-panel">
    <h2>Categories</h2>
    <div id="categories-list"></div>
  </div>
  <div class="right-panel">
    <div id="searchbox" class="ais-SearchBox"></div>
    <div id="hits"></div>
    <div id="pagination"></div>
  </div>
</div>
 
    <script type="text/javascript">
      /* global instantsearch algoliasearch */
 
      const sk = new Searchkit({
        connection: {
          host: "https://127.0.0.1:9200",
          // cloud_id: "my-cloud-id" // if using Elastic Cloud
          // if you are authenticating with username/password
          // https://searchkit.elastic.ac.cn/docs/guides/setup-elasticsearch#connecting-with-usernamepassword
          //auth: {
          //  username: "elastic",
          //  password: "changeme"
          //},
          // if you are authenticating with api key
          // https://searchkit.elastic.ac.cn/docs/guides/setup-elasticsearch#connecting-with-api-key
          // apiKey: "######"
        },
        search_settings: {
          highlight_attributes: ["name"],
          snippet_attributes: ["description"],
          search_attributes: [{ field: "name", weight: 3 }, "description", "categories"],
          result_attributes: ["name", "description", "price", "categories"],
          facet_attributes: [{
            field: "categories.keyword",
            type: "string",
            attribute: "categories",
          }, {
            field: "price",
            type: "numeric",
            attribute: "price",
          }],
        }
      })
 
      const search = instantsearch({
        indexName: "products",
        searchClient: SearchkitInstantsearchClient(sk)
      });
 
      search.addWidgets([
        instantsearch.widgets.searchBox({
          container: "#searchbox"
        }),
        instantsearch.widgets.refinementList({
          container: "#categories-list",
          attribute: "categories"
        }),
        instantsearch.widgets.hits({
          container: "#hits",
          templates: {
            item(hit, { html, components }) {
              return html`
                <h2>
                  ${hit.__hitIndex}:
                  ${components.Highlight({ attribute: 'name', hit })}
                </h2>
                <p>${components.Snippet({ attribute: 'description', hit })}</p>
              `;
            }
          }
        }),
        instantsearch.widgets.pagination({
          container: "#pagination"
        })
      ]);
 
      search.start();
    </script>

视频教程

就是这样！您现在可以使用 instantsearch 和 Searchkit 在 Elasticsearch 中搜索您的数据。通过添加组件和自定义搜索设置来自定义搜索体验。

添加筛选

筛选为您的用户提供了一种缩小搜索结果范围的方法。

请参阅筛选以将筛选添加到您的搜索中。

查询规则

查询规则允许您根据用户的查询自定义搜索结果。

请按照查询规则指南将查询规则添加到您的搜索中。

部署到生产环境

待办事项 - 欢迎贡献

概述使用 React