axure制作下拉列表模糊查询

时间:2024-04-02 12:52:36

Axure的版本8.0

一、实现的功能及展示效果:对姓名的下拉检索;

axure制作下拉列表模糊查询

二、元件搭配

1、输入框;

2、中继器;

3、标签;

三、实现逻辑
1、默认下拉列表是隐藏;
2、搜索框内的文字长度大于等于1,并且搜索的文字能够模糊匹配下拉列表中的值,显示下拉列表;
3、鼠标悬停在下拉框文字上,改变文字的背景颜色;
4、单击选中下拉列表文字将文字赋值到搜索框,同时隐藏下拉列表;
5、搜索框内的文字长度小于1,隐藏下拉列表;

四、操作步骤
1、输入框,在元件库中选择一个输入框,取名为“搜索框”;

axure制作下拉列表模糊查询
2、中继器,选择一个中继器,取名为”数据“,并在右下角给中继器设置数据内容;

axure制作下拉列表模糊查询

3、双击中继器面板,在打开的新的页面通过复制设置两个文本输入框;

axure制作下拉列表模糊查询

4、双击Case1,设置中继器中表格显示的内容;

axure制作下拉列表模糊查询

5、设置表格中两列的值,第一列是显示id,第二列是显示name;

axure制作下拉列表模糊查询

6、将中继器转换为动态面板;

axure制作下拉列表模糊查询

7、双击动态面板,再双击”State1“;至此所有基础准备工作已经完成;

axure制作下拉列表模糊查询

8、查看目前的展示效果;

axure制作下拉列表模糊查询

9、在初始化时将下拉列表和数据设置为隐藏;

选中动态面板,双击右边的”OnLoad“事件,进入到事件编写界面;

 

axure制作下拉列表模糊查询

设置下拉列表为隐藏;

axure制作下拉列表模糊查询

10、设置事件触发条件,当搜索框内的文字长度大于等于1时,触发事件;

 

选中输入框,在右边双击文本改变事件,弹出文本改变事件对话框;

axure制作下拉列表模糊查询

axure制作下拉列表模糊查询

11、设置事件的响应内容。增加中继器过滤器,并设置过滤规则;

过滤规则的设置大概意思是:下拉列表中的数据包含搜索框中的文字,其中用到了函数[[item.name.indexOf(LVAR1)>-1]];

axure制作下拉列表模糊查询

axure制作下拉列表模糊查询

12、设置展示下拉列表。当搜索框的文字长度大于等于1,并且满足过滤器规则,就显示下拉列表;

axure制作下拉列表模糊查询

13、目前效果展示如下,默认下拉列表是隐藏,当在输入框中输入文字”张“,就展示下拉列表中包含张的数据项;

axure制作下拉列表模糊查询

14、设置鼠标悬停在下拉列表时,改变下拉列表文字的背景颜色和文字颜色;

axure制作下拉列表模糊查询

axure制作下拉列表模糊查询

15、单击选中下拉列表文字将文字赋值到搜索框,同时隐藏下拉列表;

设置下拉列表数据项的单击事件,将下拉列表中的值赋值到搜索框;

axure制作下拉列表模糊查询

同时隐藏下拉列表;

axure制作下拉列表模糊查询

16、搜索框内的文字长度小于1,隐藏下拉列表;

选中输入框,增加文本改变事件;

axure制作下拉列表模糊查询

设置事件触发条件,当搜索文本框内的文字长度小于1时触发;

axure制作下拉列表模糊查询

设置下拉列表隐藏;

axure制作下拉列表模糊查询

至此完成了整个下拉检索的原型制作;