(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210767507.4 (22)申请日 2022.07.01 (71)申请人 浪潮云信息技 术股份公司 地址 250100 山东省济南市高新区浪潮路 1036号浪潮科技园S01号楼 (72)发明人 张凯　孙思清　高传集　张建伟　 宋亚萍　 (74)专利代理 机构 济南信达专利事务所有限公 司 37100 专利代理师 姜鹏 (51)Int.Cl. G06F 16/9535(2019.01) G06F 11/34(2006.01) G06F 9/445(2018.01) (54)发明名称 一种复合条件过滤组件的实现方法及系统 (57)摘要 本发明公开了一种复合条件过滤组件的实 现方法及系统， 属于UI设计和前端交互领域； 所 述的方法的具体步骤如下： S1组件以input作为 基本展现形式； S2设置组件允许外部传入的配置 项； S3渲染模板包括查询项列表模板、 查询内容 输入系统的模板及查询项标签模板； S4判断监听 到的操作， 触发交互动效； 校验输入系统内置输 入的合法性， 允许开发者添加配置项限制用户的 输入； S5根据用户输入项生成查询项标签， 触发 查询方法， 发送查询请求； 提供了在一个input中 写入多个查询项及查询内容组合的实现方法， 适 用于进行复合查询的情况； 提供配置功能， 实现 过程快捷高效； 提供动效交互， 实现对用户输入 的及时反馈； 查询内容输入系统的多样， 满足开 发需求。 权利要求书3页 说明书9页 附图1页 CN 115203541 A 2022.10.18 CN 115203541 A 1.一种复合条件过 滤组件的实现方法， 其特 征是所述方法的具体步骤如下： S1组件以i nput作为基本展现形式， 此i nput作为组件的根 input； S2在配置阶段设置组件允许外部传入的配置项， 包括查询项列表、 各查询项的内容输 入系统、 查询项输入限制、 默认查询项； S3渲染阶段的模板包括查询项列表模板、 各种查询内容输入系统的模板及查询项标签 模板； S4在判断阶段， 一方面对监听到的用户的聚焦、 失焦、 键盘事件操作进行判断， 触发相 应的交互动效， 渲染和显示相应的模板内容； 另一方面对部分可能需要校验的输入系统内 置输入的合法性校验， 允许开发者添加配置项限制用户的输入； S5在查询阶段， 根据用户当前的输入项生成一个查询项标签， 包括查询项名称和查询 内容， 并触发查询方法， 发送查询请求。 2.根据权利要求1所述的方法， 其特 征是所述的S1具体步骤如下： 组件以input作为基本展现形式； 在渲染阶段， 查询项列表模板、 查询内容输入系 统模 板以浮层的形式在组件被触发时进 行相应的渲 染， 于input 边框处展开； 查询项 标签直接显 示在组件的根 input中。 3.根据权利要求2所述的方法， 其特 征是所述的S2具体步骤如下： S21接收传入的配置， 生成个性化的复合条件查询框， 实现开发者需要功能； 开发者能 够对查询项列表、 查询项的内容输入系统、 查询项的输入限制、 默认的查询项 进行配置； S22其中查询项的输入限制包括预 先内置限制项； S23其中默认的查询项用于当用户不选择查询项直接在input中输入查询内容时， 以默 认的查询项生成查询项标签。 4.根据权利要求3所述的方法， 其特 征是所述的S3具体步骤如下： S31渲染阶段的模板包括查询项列表模板、 各种查询内容输入系统的模板及查询项标 签模板； S311其中查询内容输入系统模板， 对用户的输入进行引导和限制， 其 中input形式的查 询内容输入系统模板不作单独显示， 可直接在组件的根 input输入； S312根据开发者通过配置阶段传入的配置项对查询项列表、 与各查询项一一对应的查 询项内容输入系统进行渲染， 根据用户对查询模块的触发渲染相应的查询项标签。 5.根据权利要求 4所述的方法， 其特 征是所述的S4具体步骤如下： S41在判断阶段， 对用户的聚焦、 失焦、 键盘事件操作进行监听判断， 触发相应的交互事 件和渲染模块， 其中交互事件包括： 聚焦事件、 失焦事件、 删除事件、 查询项确认事件， 查询 内容校验 事件； S411聚焦事件： 输入框聚焦时， 若没有已选中的查询项， 则触发查询项列表的显示； 若 已有选中的查询项， 则触发与当前查询项对应的查询内容输入系统的显示； S412失焦事 件： 输入框失焦时， 隐藏 查询项列表和查询内容输入系统； S413删除事件： 删除事件可选的包括根input的删除和查询项标签删除； 根input删除 提供删除正在输入的查询项及查询内容功能， 查询项标签删除提供删除已生成的查询项标 签功能； S414查询项确认事件： 确认当前选中的查询项， 触发与该查询项对应的查询内容输入权　利　要　求　书 1/3 页 2 CN 115203541 A 2系统的显示； S415查询内容校验 事件： 根据配置对当前输入的查询内容进行长度、 格式校验。 6.根据权利要求5所述的方法， 其特 征是所述的S5具体步骤如下： 在查询阶段， 根据用户当前输入的查询内容和选中的查询项生成新的查询项标签， 显 示在输入框中； 然后清除查询项的选中状态； 并执行查询操作， 调用查询接口将所有已生成 的查询项标签作为复合 查询条件传递到后台； 7.一种复合条件过滤组件的实现系统， 其特征是所述的系统具体包括实现根input模 块、 实现配置模块、 实现渲染模块、 实现判断模块和实现查询模块： 实现根input模块： 组件以i nput作为基本展现形式， 此i nput作为组件的根 input； 实现配置模块： 设置组件允许外部传入的配置项， 包括查询项列表、 各查询项的内容输 入系统、 查询项输入限制、 默认查询项； 实现渲染模块： 包括查询项列表模板、 各种查询内容输入系统的模板及查询项标签模 板； 实现判断模块： 一方面对监听到的用户的聚焦、 失焦、 键盘事件操作进行判断， 触发相 应的交互动效， 渲染和显示相应的模板内容； 另一方面对部分可能需要校验的输入系统内 置输入的合法性校验， 允许开发者添加配置项限制用户的输入； 实现查询模块： 根据用户当前的输入项生成一个查询项标签， 包括查询项名称和查询 内容， 并触发查询方法， 发送查询请求。 8.根据权利要求7 所述的系统， 其特 征是所述实现根 input模块具体为： 组件以input作为基本展现形式； 在渲染阶段， 查询项列表模板、 查询内容输入系 统模 板以浮层的形式在组件被触发时进 行相应的渲 染， 于input 边框处展开； 查询项 标签直接显 示在组件的根 input中。 9.根据权利要求8所述的系统， 其特征是所述实现配置模块具体包括配置生成模块、 输 入限制模块和默认查询模块： 配置生成模块： 接收传入的配置， 生成个性化的复合条件查询框， 实现开发者需要功 能； 开发者能够对查询项列表、 查询项的内容输入系统、 查询项的输入限制、 默认的查询项 进行配置； 输入限制模块： 预 先对查询项的输入进行内置限制； 默认查询模块： 其中默认的查询项用于当用户不选择查询项直接在input中输入查询 内容时， 以默认的查询项生成查询项标签。 10.根据权利要求9所述的系统， 其特征是所述实现渲染模块具体包括查询项列表模板 模块、 查询内容输入系统模板模块和查询项标签模块； 查询项列表模板模块： 包括查询项列表模板、 各种查询内容输入系统的模板及查询项 标签模板； 查询内容输入系统模板模块： 其中查询内容输入系统模板， 对用户的输入进行引导和 限制， 其中input形式的查询内容输入系统模板不作单独显示， 可直接在 组件的根input输 入； 查询项标签模块： 根据开发者通过配置阶段传入的配置项对查询项列表、 与各查询项 一一对应的查询项内容输入系统进行渲 染， 根据用户对查询模块的触发渲染相应的查询项权　利　要　求　书 2/3 页 3 CN 115203541 A 3