Axure教程：若何实现淘宝模糊搜索框？

我们每天都在利用淘宝的搜索功能来筛选定位自己想要的商品，只须要输入一个关键词，就能模糊搜索到包含此关键词的所有商品。

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

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

二、元件搭配

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

选中【中继器】，在样式中，为中继器添加默认的数据，在<Cloumn0>这一列添补自己想要的数据项。

三、交互实现

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

2. 设置条件知足时，显示下面的数据【中继器】，如下图所示：

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

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

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

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

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

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

如下图所示：

4. 接下来只须要添加另一个环境结果2。
其条件设置为【否则如果真】，动作为：隐蔽【数据中继器】。
如下图所示：

四、终极效果如下

中继器在原型制作中对数据的筛选是一个不错的元件，大家可以多考试测验利用，有任何问题欢迎在文章底部留言谈论。
源文件可以在"大众号中留言获取。

本文由 @火星人～艾斯 原创发布于大家都是产品经理。
未经容许，禁止转载

题图来自Unsplash，基于CC0协议