Axure9 使用中继器实现模糊查询搜索

最近完善产品的元件库,刚好遇到需要用中继器实现查询搜索功能。

要求实现的效果也很简单:如下图,我想根据输入框内文本内容改变时,中继器的C1列按照输入框当前的文本内容,模糊查询结果并显示结果。

接下来就是如何实现:

1.给输入框添加交互“文本改变时”,选择中继器的“添加筛选”动作;

2.选择目标中继器,给筛选取个好辨认的名字,勾选“移除其他选项”,然后点击fx开始写规则;

3.这里我们需要获取文本输入框的输入内容,所以先建一个局部变量LVAR1,取值是文本输入框的的文本内容;

4.在文本框内输入规则:[[Item.C1.indexOf(LVAR1)>-1]],点击确定,完成动作编写,预览一下就可以查看效果。

这句规则的组成:

①Item.C1:不难理解是操作目标,指明要在中继器的哪一列进行;

②indexOf(LAVR1):indexOf('searchValue')是Axure自带的字符串函数,函数定义是返回查找的字符串第一次出现的位置,如果未找到则返回为-1,这里我们将局部变量LVAR1作为参数传入;

③>-1:因为字符串下标是从0开始,这时我们将局部变量LVAR1作为参数(查找的字符串)传入,与中继器C1列的每个数据做比对,如果某个数据返回值大于-1,如0、1、2等,表明这个数据内包含了参数,应该作为结果筛选出来,反之如果某个数据返回值等于-1,表明未找到参数,按我们的效果要求应该剔除

********************************************************************

效果预览:

效果
效果

********************************************************************

额外话题1:这一次输入框效果再加一个要求,如果文本内容变为空,要求显示所有数据,这样如何实现呢?

比较简单的方法,给输入框的交互“文本改变”时添加一种情形:如果输入框文本内容是空,则移除中继器的全部筛选条件

额外话题2:如果我想一个输入框模糊搜索中继器的不同列,该怎么做?

这里的话可以用到布尔运算的与或符,还可以用到运算数学符号+,如果两列之间用到+号的话,规则末尾的-1也需要乘以2

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章