spz-search 智能商品搜索
用于搜索符合关键词的商品数据。
布局
布局
跳转到“布局”何时使用
跳转到“何时使用”需要在店铺中安装智能商品搜索插件。
- 当需要搜索商品信息时。
- 当需要根据关键词联想出相关商品信息时。
代码演示
跳转到“代码演示”基本用法
跳转到“基本用法”<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
跳转到“handleFormInput”当开启关键词联想时,调用此方法可以请求符合的联想词。
参数名 | 说明 | 类型 | 是否必需 |
---|---|---|---|
keyword | 关键词 | string | 是 |
handleSearchSubmit
跳转到“handleSearchSubmit”当表单提交时去触发此方法进行搜索请求。
参数名 | 说明 | 类型 | 是否必需 |
---|---|---|---|
value | 关键词 | string | 是 |
handleHistory
跳转到“handleHistory”设置历史搜索关键词。
参数名 | 说明 | 类型 | 是否必需 |
---|---|---|---|
value | 关键词 | string | 是 |
handleClearHistory
跳转到“handleClearHistory”清除历史搜索关键词的缓存,无需参数。
handleRefreshHot
跳转到“handleRefreshHot”刷新当前的搜索热词列表,无需参数。