[{"value":"如何生成预测","id":"如何生成预测","hLevel":2,"level":1},{"value":"资源","id":"资源","hLevel":2,"level":1},{"value":"实现预测搜索","id":"实现预测搜索","hLevel":2,"level":1,"children":[{"value":"搜索主体","id":"搜索主体","hLevel":3,"level":2},{"value":"预测搜索部分","id":"预测搜索部分","hLevel":3,"level":2},{"value":"JavaScript 函数","id":"javascript-函数","hLevel":3,"level":2}]}]

支持预测搜索

你可以在主题中支持预测搜索，以便在输入搜索字段时立即显示建议的结果。预测搜索可帮助客户阐明和优化他们的搜索查询，并为他们提供探索在线商店的新方法。

它可以让客户快速浏览匹配项，而无需离开当前页面查看单独的搜索结果列表。

预测搜索支持对商品的预测。

如何生成预测

当你开始在搜索栏中输入内容后，预测搜索会预测与你输入的内容相关的结果。它们与商店资源的可搜索属性上的搜索词完全匹配。

匹配的商品或变体将在搜索栏下拉的商品建议中显示。例如：你正在寻找滑雪板并输入 very-fast snowbo，包含 very、fast、snowbo 或以它们为开头的商品或变体将在商品建议中显示。

如果一个单词由连字符或空格分隔，那它将被视为两个术语。分成多个术语的单词或短语返回的结果与相同的单个术语不同。例如：t-shirt 和 t shirt 返回相同结果，但 tshirt 则不同。

仅当查询与特定于变体标题的术语匹配时，返回返回商品变体，且仅返回最匹配术语的变体作为结果。例如：一家商店有一款滑雪板，有蓝色版本和浅蓝色版本。如果你搜索 snowbo，则会返回滑雪板商品。但是，如果你搜索 light blue snowbo，则仅返回浅蓝色变体。

查询预测是通过使用自然语言处理技术从商品目录以及客户搜索中提取单词和短语来生成的。

资源

predictive_search object
预测搜索 API /search/suggest

实现预测搜索

要支持预测搜索，你需要实现以下组件：

搜索主体：用于预测搜索的搜索输入
预测搜索部分：一个承载一般预测性搜索显示的 section。使用 predictive_search object 的 products 显示搜索结果。
JavaScript函数：使用预测性搜索 API 的章节响应来渲染预测性搜索章节。

提示

有关更深入的示例，请参阅 Seed 中的以下文件：

搜索主体

主搜索是要应用的预测搜索功能的搜索输入。

/sections/main-search.html

<script src="{{ asset_url 'sections/header/predictive-search.js' }}" defer></script>
<predictive-search>
  <form action="{{ routes.search_url }}" method="get">
    <label for="Search">Search</label>
    <input
      id="Search"
      type="search"
      name="keyword"
      value="{{ escape search.terms }}"
      maxlength="255"
      autocorrect="off"
      autocomplete="off"
      autocapitalize="off"
      spellcheck="false"
      autofocus
    >
    <button class="search-modal__submit-button">{{snippet 'icons/search'}}</button>
    <div tabindex="-1" data-predictive-search></div>
  </form>
</predictive-search>

预测搜索部分

预测搜索部分托管预测搜索结果。通过循环 predictive_search 对象的 products 属性输出这些结果。

此部分是通过在搜索主体中使用 JavaScript 函数呈现的。

以下示例呈现搜索结果中的商品。

/sections/predictive-search.html

<div class="predictive-search-results">
  {{#if (length predictive_search.products)}}
    <h2 class="predictive-search__head body5">
      Products
    </h2>
  {{/if}}
  <ul class="predictive-search__results-list list-unstyled">
    {{#each predictive_search.products}}
      <li class="predictive-search__list-item">
        <a class="predictive-search__item link" href="{{ url }}">
          {{ image_tag (image_url product width=50) }}
          <p>{{ title }}</p>
        </a>
      </li>
    {{/each}}
    <li class="predictive-search__list-item">
      <button class="predictive-search__term">
        Search for “__QUERY_KEY__”
      </button>
    </li>
  </ul>
</div>

JavaScript 函数

当预测搜索 section 最初呈现时，predictive_search 对象并没有被定义，所以你需要使用预测搜索 API 的部分响应来获取填充的 section 内容。

下面的例子使用了一些预测搜索 API 的参数，你可以根据自己的需要进行定制。

提示

建议使用 Handlebars routes 对象来动态地设置 fetch 调用的端点URL。

/assets/predictive-search.js

class PredictiveSearch extends HTMLElement {
  constructor() {
    super();
    this.input = this.querySelector('input[type="search"]');
    this.predictiveSearchResults = this.querySelector('[data-predictive-search]');
    this.setupEventListeners();
  }
  onChange() {
    const searchTerm = this.query;
    if (!searchTerm.length) return this.close(true);
    this.getSearchResults(searchTerm);
  }
  getSearchResults(searchTerm) {
    fetch(
      `/search/suggest?q=${encodeURIComponent(searchTerm)}&field=title&resource_type=product&available_type=show&section_id=predictive-search`,
    )
      .then((response) => {
        if (!response.ok) {
          this.close();
          throw new Error(response.status);
        }
        return response.text();
      })
      .then((text) => {
        const resultHtml = new DOMParser()
          .parseFromString(text, 'text/html')
          .querySelector('.predictive-search-results').innerHTML;
        this.renderSearchResult(queryKey, resultHtml);
      })
      .catch((error) => {
        this.close();
        throw error;
      });
  }
  renderSearchResult(queryKey, resultHtml) {
    this.loading = false;
    this.predictiveSearchResults.innerHTML = resultHtml.replace('__QUERY_KEY__', queryKey);
    this.setAttribute('results', true);
    if (this.contains(document.activeElement)) this.open();
  }
  open() {
    this.setAttribute('open', true);
  }
  close(clearSearchTerm = false) {
    this.removeAttribute('open');
  }
}
customElements.define('predictive-search', PredictiveSearch);