搜索功能开发
最后更新: | 浏览次数: 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,仅允许在分类列表页使用