搜索功能开发
最后更新: | 浏览次数: 149|功能开发
介绍
产品搜索功能提供了便捷而高效的用户体验，通过精心设置的关键属性和方法，实现了实时搜索与搜索按钮的无缝交互。所有属性配置均针对用户体验和无障碍支持进行优化，确保搜索功能的准确性和一致性。
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,仅允许在分类列表页使用