Cuttlefish Docs
  • 简体中文

    • spz-search 智能商品搜索

    支持布局: container

    何时使用

    需要在店铺中安装智能商品搜索插件。

    • 当需要搜索商品信息时。
    • 当需要根据关键词联想出相关商品信息时。

    代码演示

    基本用法

    <spz-search id="smart-search" class="smart-search-wrap" layout="container">
  <spz-render
    role="form"
    layout="container"
    manual
  >
    <template>
      <div class="smart-search-header">
        <form
          id="smart-search-form"
          class="smart-search-form"
          method="GET"
          is="spz-form"
          @submit="smart-search.handleSearchSubmit(value=event.q);"
        >
          <div class="smart-search-input-content">
            <input
              class="smart-search-input"
              type="search"
              name="q"
              spz-else
            >
          </div>
          <button
            type="submit"
            class="smart-search-submit-btn button-primary"
          >
            搜索
          </button>
        </form>
      </div>
    </template>
  </spz-render>
</spz-search>

    自定义各功能部分

    • 使用带有role=form的spz-render元素表示承载搜索表单部分的内容。

    • 使用带有role=history的spz-render元素表示承载历史搜索的关键字内容。

    • 使用带有role=hotkeyword的spz-render元素表示承载热门的关键字内容。

    • 使用带有role=thinkresult的spz-render元素表示承载根据输入的关键词联想出来的关键词列表。

    方法

    handleFormInput

    当开启关键词联想时，调用此方法可以请求符合的联想词。

    参数名说明类型是否必需
    keyword关键词string是

    handleSearchSubmit

    当表单提交时去触发此方法进行搜索请求。

    参数名说明类型是否必需
    value关键词string是

    handleHistory

    设置历史搜索关键词。

    参数名说明类型是否必需
    value关键词string是

    handleClearHistory

    清除历史搜索关键词的缓存，无需参数。

    handleRefreshHot

    刷新当前的搜索热词列表，无需参数。

    AI 摘要（LLM Ready）

    • 组件标识：spz-search
    • 用途一句话：用于搜索符合关键词的商品数据。
    • 可识别属性条目：0
    • 可识别方法小节：5
    • 可识别事件小节：0
    • 关键属性名（Top）：无（待补充）
    • 关键方法名（Top）：handleFormInput、handleSearchSubmit、handleHistory、handleClearHistory、handleRefreshHot
    • 关键事件名（Top）：无（待补充）
    • 阅读顺序建议：先看「何时使用」与「代码演示」，再核对属性/方法/事件。
    • 关联文档：/guide/actions-and-events/ 、/guide/layouts/