axure商城

【Axure中继器】利用中继器筛选的功能,实现多词拆词搜索的效果

一、思路:
在日常的使用过程中,我们经常遇到需要输入一个带空格多词进行全文搜索的场景,现在Axure的中继器是有根据内容进行筛选的功能。那么如何来实现这样的效果呢?
1、拆词:需要把输入的搜索内容根据空格拆成多个词,然后保存下来后,利用Axure的中继器的筛选功能,添加过滤器(拆词后,有多少个词,就添加多少个筛选条件)
2、如何拆词:因为Axure是没有代码循环的功能和数组的功能,所以,循环可以用“动态面板”切换状态来实现,也可以通过触发当前按钮的方式来循环;保存拆词后的内容可以通过一个临时的中继器来保存
3、如何添加筛选条件:在这个临时中继器保存拆的词后,在进行每项加载时,就给中继器添加筛选项即可。

二、看效果
https://vf13g3.axshare.com

三、Axure实现
1、放入需要的组件
一个输入搜索内容的输入框、两个按钮、一个显示数据的中继器
一个临时中继器。这个组件都是隐藏的,不需要显示。
如下图

【Axure中继器】利用中继器筛选的功能,实现多词拆词搜索的效果
2、需要设置3️⃣个变量,用于存储拆词时用到。如下图:

【Axure中继器】利用中继器筛选的功能,实现多词拆词搜索的效果

3、开始写交互了

“搜索框”的文本变化的交互:

【Axure中继器】利用中继器筛选的功能,实现多词拆词搜索的效果

每次变化,就表示从头开始(初始化)

“查询“按钮的交互:

【Axure中继器】利用中继器筛选的功能,实现多词拆词搜索的效果

这里交互的思路就是:
a .对数据中继器的筛选条件清除(想当于初始化);
b.对临时存放拆词的中继器进行初始化(清空);
c.对变量进行初始化的赋值
d.如果拆词后的内容不为空时,继续执行这个“查询”按钮的点击事件(相当于做循环)

“重置”按钮的交互:
【Axure中继器】利用中继器筛选的功能,实现多词拆词搜索的效果

—————–以下是重点,也是实现拆词搜索的关键————–

“临时中继器”每项加载的交互:

【Axure中继器】利用中继器筛选的功能,实现多词拆词搜索的效果

这个比较简单,就是每项加载时,对数据中继器添加筛选条件即可。

这里重点说明:
1、 因为这个交互是写在“临时中继器”中的,所以要对数据中继器添加筛选时,需要用到“TargetItem.XXX(字段)”,不能用Item.xxx,Item是指当前中继器;
2、拆词搜索,是包含关系,也就是模糊搜索,只能用indexOf()这个函数,>=0 说明包含要搜索的词语;=-1说明不包含要搜索的词语。
3、添加多个筛选条件是,一定要把“remove other filters”的勾选去掉,并且选择“Match any“这个。这个表示“或”的关系。如下图:

【Axure中继器】利用中继器筛选的功能,实现多词拆词搜索的效果

写在最后:

输入搜索内容时,支持中间可能输入了多个空格,在拆词时会把多余的空格去掉。

———-完———

给TA打赏
共{{data.count}}人
人已打赏
Axure教程基础教程

MAC电脑上Axure自动备份文件存放位置

2024-6-12 11:09:16

Axure教程高级教程

【Axure中继器】利用中继器,实现多表头筛选的效果

2024-9-1 17:32:40

axure商城
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索