本文介绍的是用Axure中的中继器制作模糊搜索
效果
在这里插入图片描述
预览地址:https://f16g7e.axshare.com

功能
输入关键字,可查询出相应的结果

制作
一、需要元件
矩形、中继器
二、制作过程
1、搜索框
拖入一个矩形元件,设置大小为215×30,在矩形中加入一个文本框,大小与矩形相同,命名为“筛选框”,提示文字“所有数据模糊搜索”,矩形和文本框组合一起,命名为“筛选”,如图:
在这里插入图片描述
2、按钮
拖入两个矩形元件,在其中一个矩形中加入查询图片,命名为“查询”,另一矩形元件命名为“重置”,如图:
在这里插入图片描述

3、表格
拖入一个表格元件,表格设置5×1,表格每项分别为:姓名、性别、年龄、班级、操作,(与中继器的值对应)如图:
在这里插入图片描述
4、中继器
在表格下方拖入一个中继器元件,对其赋值,如图:
在这里插入图片描述

元件制作完毕

交互

1、筛选框

获取焦点时,设置矩形选中状态为“true”,如图:
在这里插入图片描述失去焦点时,设置矩形选中状态为“false”,如图:

在这里插入图片描述
2、查询按钮
鼠标点击时,设置中继器添加筛选条件[[item.xingming.indexOf(LVAR1)+item.xingbie.indexOf(LVAR1)+item.nianling.indexOf(LVAR1)+item.zhiwei.indexOf(LVAR1)+item.xueli.indexOf(LVAR1)>-5]],如图:
在这里插入图片描述

在这里插入图片描述
3、重置
鼠标点击时,设置”筛选框“的文字为空

在这里插入图片描述
移出全部筛选

在这里插入图片描述
4、中继器
每项加载时,设置”姓名”文本[[Item.xingming]],“性别”为[[Item.xingbie]],“年龄”为[[Item.nianling]],“班级”为[[Item.banji]],如图:

在这里插入图片描述
整体设计完毕。

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐