SAP 电商云 Spartacus UI quick order 产品 live search 的实现
2023-09-14 09:04:00 时间
我们在如下图输入框里输入至少三个字符后，就会触发一个向 Commerce 后台的 product 搜索动作：
form 事件的数据源就是 this.form.valueChanges. 从语义上讲，每次 form 里的 input 控件值发生变化，即用户有新的输入时，this.form.valueChanges 这个 Observable 就会广播事件：
广播的事件通过 debounceTime(300) 进行一个300毫秒的限流操作，然后在 filter 操作符里，过滤掉产品长度小于 3 的情况：
最后调用 this.searchProducts 方法。
更多Jerry的原创文章，尽在：“汪子熙”:
相关文章
- SAP UI5 sap.ui.Device.media.RANGESETS.SAP_STANDARD_EXTENDED 介绍
- 聊聊 SAP 产品 UI 上的消息显示机制
- SAP UI5应用访问OData metadata的url和Destination
- local path of sap-ui-core-less-140903345-dbg.js
- SAP UI5 formatter的原理和调试截图-当UI字段没有值显示时怎么办
- new sap.ui.core.Item() - how is it initialized
- 使用SAP Transaction Launcher将ABAP Webdynpro嵌入到WebClient UI中
- SAP CRM和Cloud for Customer的UI界面皮肤更改
- 如何通过outlet在SAP Spartacus的产品明细页面插入自定义UI
- SAP 电商云 Spartacus UI 里的 ASM 模块启用的前置条件
- SAP 电商云 Spartacus UI 客户端模式下产品主数据的 HTTP 请求设计
- SAP 电商云 Spartacus UI 产品搜索结果的设计明细
- SAP 电商云 Spartacus UI Quick order 产品搜索结果页面的显示逻辑
- 如何找到 SAP 电商云 Spartacus UI 产品明细界面对应的 Angular 实现 Component 名称
- 如何在 SAP 电商云 Spartacus UI 首页的产品展示里显示视频
- SAP Commerce Cloud Spartacus UI 的购物车 Cart 功能
- 使用ng-container标签在SAP Spartacus里插入UI
- SAP Cloud for Customer里新的Lead UI对Mashup集成的支持原理
- 使用SAP C4C rule editor动态控制UI上某个按钮是否显示 - SAP Cloud for Customer UI 规则编辑器的使用一例
- SAP CRM和C4C的订单Number range
- SAP CRM WebClient UI点了产品主数据搜索结果超链接后的跳转调试
- SAP CRM WebClient UI上分销渠道点击展开按钮后执行了哪些逻辑
- SAP不同产品的UI开发策略概述
- 各种 SAP 产品的自定义 UI 创建和集成方法一览
- 在SAP UI中使用纯JavaScript显示产品主数据的3D模型视图
- SAP 电商云 Spartacus UI 产品明细页面路由路径的自定义配置