今天，我们提升一下难度，做一个复杂的效果——实时搜索并展示搜索结果。这其中利用到了中继器中的“过滤”功能。这个例子或许有那么一点点的难以理解，但事实上并不是很麻烦，麻烦之处在于你的逻辑能力，以及发现了问题如何找到应对的方式方法去处理，我想这也是产品经理需要具备的能力之一，具备了这样的能力，我想在和技术团队做沟通交流的时候，就会有一定的话语权，而不至于被牵着走，最后妥协，放弃了初衷。
中继器进阶篇实例：实时搜索并展示搜索结果
下面，我们先看看该例子是怎么样的一种效果：
展示效果
看上去有没有觉得很是高大上？！按照以往Axure的版本，要做出这样一个效果，花费的时间和精力相对于产出而言，完全不成比例，所以对于早期的产品经理（或是交互设计师）来讲，会偏向于线稿+文档来描述该功能，遇到技术大神，这不是什么难以解决的一个功能，但就怕遇到菜鸟，沟通就会成为很大的问题。之前我曾接触过一个利用动态面板来实现类似效果的原型，较为复杂，而且组件颇多，难以控制，现在有了中继器，我们可以将这个过程变得异常简单，甚至可以作为标准组件，放到自己的库中，需要用时，简单修改即可。
这次讲解，会加入App的理念，所以会多了一些操作。首先我们新建一个原型，拉入iPhone的mockup框架，并在上面拉入一个内联框架，双击该框架，将链接接入相应的页面，这样的操作，能让我们更加专注于页面内的内容创作，但在原型演示时，又具备一定的视觉效果。具体操作见下图：
事前准备工作接下来，我们开始创建基本的内容页，我们想将页面中的元素，按照需求，先搭建完善：
内容页的搭建
1、对于每一个App，尤其是IOS来讲，导航栏一般是必备；
2、接着，我们创建一个搜索框，在这里，我们通过矩形+素材图片+一个文本框构建这个部件：
输入框的构建
在这里，我们需要对文本框做一下属性的调整:
对文本框的调整
3、我们利用之前所讲，搭建一个简单的列表，用以展示用户列表。
下一步，我们就正式开始今天的教学，如何利用中期的筛选，实现对文本框的输入，来动态显示相关的内容。在这个过程中，涉及到的技术点是如何对中继器进行筛选操作。
我们先选中“输入框”这个文本框，创建一个“文本改变时”的用例，这个用例由两部分组成：1、判断输入的文本是否大于等于1，如果是，则开始中创建好的中继器中进行筛选动作，查找输入的字是否有相关的内容，否则，则清除筛选条件，重置中继器的初始状态：
用例的创建1
用例的创建2
需要特别说明的是，在这个用例中，我们为了满足需求，创建了一个临时变量，用来控制输入文本的长度，这个看起来有些复杂，事实上，我们在原型的创作中，用到这种操作的不在少数，所以建议大家多了解了解，在以后的教程中，也会穿插类似的一些简单操作。
此外，还捎带讲解了一下substr这个函数，对于有一点点程序经验的人来讲，这个不算难，对于新人则可以慢慢学习。
至此，我们所想要达到的效果便算是完成了。你可以预览自己的成果了！
如果该教程让你读的有些不知所以然，那么可以下载我做好的源文件，慢慢研究：筛选实例
如果你喜欢曹蜀黍的教程，请不吝点喜欢，你的支持，是我继续出教程的动力，么么哒！更多精彩教程，敬请关注！
有兴趣的朋友可以加我个人微信公众号（微信公众号：产品设计曹蜀黍），一起交流！
微信公众号：产品设计曹蜀黍
网友评论