一、思路:
在日常的使用过程中,我们经常遇到需要输入一个带空格多词进行全文搜索的场景,现在Axure的中继器是有根据内容进行筛选的功能。那么如何来实现这样的效果呢?
1、拆词:需要把输入的搜索内容根据空格拆成多个词,然后保存下来后,利用Axure的中继器的筛选功能,添加过滤器(拆词后,有多少个词,就添加多少个筛选条件)
2、如何拆词:因为Axure是没有代码循环的功能和数组的功能,所以,循环可以用“动态面板”切换状态来实现,也可以通过触发当前按钮的方式来循环;保存拆词后的内容可以通过一个临时的中继器来保存
3、如何添加筛选条件:在这个临时中继器保存拆的词后,在进行每项加载时,就给中继器添加筛选项即可。
二、看效果
https://vf13g3.axshare.com
三、Axure实现
1、放入需要的组件
一个输入搜索内容的输入框、两个按钮、一个显示数据的中继器
一个临时中继器。这个组件都是隐藏的,不需要显示。
如下图
2、需要设置3️⃣个变量,用于存储拆词时用到。如下图:
3、开始写交互了
“搜索框”的文本变化的交互:
每次变化,就表示从头开始(初始化)
“查询“按钮的交互:
这里交互的思路就是:
a .对数据中继器的筛选条件清除(想当于初始化);
b.对临时存放拆词的中继器进行初始化(清空);
c.对变量进行初始化的赋值
d.如果拆词后的内容不为空时,继续执行这个“查询”按钮的点击事件(相当于做循环)
“重置”按钮的交互:
—————–以下是重点,也是实现拆词搜索的关键————–
“临时中继器”每项加载的交互:
这个比较简单,就是每项加载时,对数据中继器添加筛选条件即可。
这里重点说明:
1、 因为这个交互是写在“临时中继器”中的,所以要对数据中继器添加筛选时,需要用到“TargetItem.XXX(字段)”,不能用Item.xxx,Item是指当前中继器;
2、拆词搜索,是包含关系,也就是模糊搜索,只能用indexOf()这个函数,>=0 说明包含要搜索的词语;=-1说明不包含要搜索的词语。
3、添加多个筛选条件是,一定要把“remove other filters”的勾选去掉,并且选择“Match any“这个。这个表示“或”的关系。如下图:
写在最后:
输入搜索内容时,支持中间可能输入了多个空格,在拆词时会把多余的空格去掉。
———-完———