搜索功能开发

最后更新: | 浏览次数: 156|功能开发

介绍

产品搜索功能提供了便捷而高效的用户体验,通过精心设置的关键属性和方法,实现了实时搜索与搜索按钮的无缝交互。所有属性配置均针对用户体验和无障碍支持进行优化,确保搜索功能的准确性和一致性。

Input属性

属性 默认值 自定义属性 描述
id   必填 每个搜索输入框的唯一标识符,用于识别和操作该输入框
type search   定义输入框的类型为搜索
data-type   指定搜索类型,可选值: product /article / category
data-pagesize 12 设置每页显示的搜索结果数量,最大值:120

Button属性

属性 默认值 自定义属性 描述
id search_button   每个搜索按钮的唯一标识符,用于识别和操作该按钮
type button   定义按钮的类型为按钮
data-control-id 与input的id一致 与文本框 id一致,用于按钮和输入框之间的关联

方法

方法 描述
search(event) 处理输入框中的键盘事件,实现实时搜索功能。 `event` 参数提供了事件的详细信息。

示例

<input type="search" id="searchKey" class="form-control" data-type="product" data-pagesize="12" placeholder="Keywords" onkeyup="cms.search(event)"/>
<button type="button" id="search_button" class="btn" data-control-id="searchKey" onclick="cms.search(event)">搜索</button>

总结

1. data-type定义搜索的返回内容,如需搜索文章,需要将data-type值更改为:article

2. 如果需要搜索当前分类,将data-type值更改为:category,仅允许在分类列表页使用