axure制作下拉列表模糊查询

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时触发；

设置下拉列表隐藏；

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