Axure的版本8.0
一、实现的功能及展示效果:对姓名的下拉检索;
二、元件搭配
1、输入框;
2、中继器;
3、标签;
三、实现逻辑
1、默认下拉列表是隐藏;
2、搜索框内的文字长度大于等于1,并且搜索的文字能够模糊匹配下拉列表中的值,显示下拉列表;
3、鼠标悬停在下拉框文字上,改变文字的背景颜色;
4、单击选中下拉列表文字将文字赋值到搜索框,同时隐藏下拉列表;
5、搜索框内的文字长度小于1,隐藏下拉列表;
四、操作步骤
1、输入框,在元件库中选择一个输入框,取名为“搜索框”;
2、中继器,选择一个中继器,取名为”数据“,并在右下角给中继器设置数据内容;
3、双击中继器面板,在打开的新的页面通过复制设置两个文本输入框;
4、双击Case1,设置中继器中表格显示的内容;
5、设置表格中两列的值,第一列是显示id,第二列是显示name;
6、将中继器转换为动态面板;
7、双击动态面板,再双击”State1“;至此所有基础准备工作已经完成;
8、查看目前的展示效果;
9、在初始化时将下拉列表和数据设置为隐藏;
选中动态面板,双击右边的”OnLoad“事件,进入到事件编写界面;
设置下拉列表为隐藏;
10、设置事件触发条件,当搜索框内的文字长度大于等于1时,触发事件;
选中输入框,在右边双击文本改变事件,弹出文本改变事件对话框;
11、设置事件的响应内容。增加中继器过滤器,并设置过滤规则;
过滤规则的设置大概意思是:下拉列表中的数据包含搜索框中的文字,其中用到了函数[[item.name.indexOf(LVAR1)>-1]];
12、设置展示下拉列表。当搜索框的文字长度大于等于1,并且满足过滤器规则,就显示下拉列表;
13、目前效果展示如下,默认下拉列表是隐藏,当在输入框中输入文字”张“,就展示下拉列表中包含张的数据项;
14、设置鼠标悬停在下拉列表时,改变下拉列表文字的背景颜色和文字颜色;
15、单击选中下拉列表文字将文字赋值到搜索框,同时隐藏下拉列表;
设置下拉列表数据项的单击事件,将下拉列表中的值赋值到搜索框;
同时隐藏下拉列表;
16、搜索框内的文字长度小于1,隐藏下拉列表;
选中输入框,增加文本改变事件;
设置事件触发条件,当搜索文本框内的文字长度小于1时触发;
设置下拉列表隐藏;
至此完成了整个下拉检索的原型制作;