Axure9淘宝模糊搜索框操作实例

今天给大家介绍为如何用axure实现模糊搜索，我们来了解一下搜索框有什么作用，产品引进更多的流量，增加了用户黏性。出于节省空间和搜索需求的考量，搜索框内会有文字的提示，提示用户搜索的方式，axure模糊搜索输入框教程详情往下看：

axure模糊搜索输入框教程

一、实现逻辑

1、当输入框的值为空时，下面的数据项不显示；

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

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

二、元件搭配

在元件库中拉入一个输入框作为搜索输入框和一个中继器作为数据展示，如下所示：

三、交互实现

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

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

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

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

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

四、最终效果如下