Axure 下拉菜单模糊查询

Axure下拉菜单模糊查询

选择省份或者地市菜单，下拉内容繁多并且查找不方便，只需要输入一个关键词，就能模糊搜索到包含此关键词的省份或地市。今天将为大家讲解如何在原型中体现该效果。案例效果如下：

一、实现逻辑

当输入框的值为空时，鼠标移入文本框显示菜单；

当输入框的值不为空时，显示数据筛选出包含输入框中关键词的数据项；

点击菜单任一项设置文本内容为选择项文字

根据上面的逻辑，需要用到函数[[LVAR.indexOf(‘searchValue’)]]，对函数进行筛选。

二、元件搭配

1.在元件库中拉入一个【输入框】作为搜索输入框命名为文本框和一个【中继器】作为数据展示命名为数据，调整样式，如下所示：

2.选中【中继器】，在样式中，为中继器添加默认的数据，在这一列填充自己想要的数据项（以选择地市为例）。

三、交互实现

1. 选中【输入框】，添加【文本改变时】的交互事件。需要先对文本添加判断条件，再执行动作，即当输入框的文字长度大于等于1时，执行动作，条件设置如下：

2. 选中中继器右键转换为动态面板双击动态面板进入状态再次双击进入中继器样式编辑，增加选中效果

3.增加单击效果修改文本框内容

4.鼠标移入文本框增加鼠标移入时效果，显示菜单，交互如图

5.设置条件满足时，显示下面菜单，如下图所示：

6. 对数据【中继器】中的数据项进行筛选，主要利用函数[[LVAR.indexOf(‘searchValue’)]]，设置如下图所示：

1）首先点击上图【规则】输入框旁的【fx】，配置筛选函数，为其先添加一个局部变量，即搜索框中的文字。

2）插入变量或函数为[[Item.Column0.indexOf(LVAR1)!=-1]]。

函数的意思为：在中继器中查询文本框中文字出现的位置，也就是说，凡是能返回数字的条目，表示都是包含文本框文字的。当查询不到文本框文字时，返回值为-1（负1），即不包含查询的关键字。

其中 Item.Column0代表中继器中的数据项。LVAR1代表局部变量为文本框元件文字。!=-1的意思是即排除不包含查询的关键字的数据。

这样出现的模糊查询的结果是，只要包含输入框关键词的任意一个字，模糊查询的选项都会被列出来。

7.接下来只需要添加另一个情形结果2。其条件设置为文本为空时，动作为：隐藏【数据中继器】。如下图所示：

四：最终效果