在Axure里面搜索框联想词效果如何实现

　　在这个互联网时代，每天都会用到搜索功能，手机，网页，各种各样的搜索框，而且做得越来越出色，只要输入部分关键词，就能看到很多候选词，可以帮助到无法准确定位自己想要搜索的东西，这样做解决了很大部分人的选择困扰。本文将会带带大家学习如何在Axure（http://www.axurechina.cc/）实现搜索框联想词效果。

　　首先下载Axure(http://www.axurechina.cc/download.html)软件，安装成功之后启动软件，在页面中拖入一个“文本框”元件，调整大小为W:325

H:25，并命名为“搜索框”，为了能够美化效果，把文本框的“隐藏边框”勾选上。

　　接下来在页面中拖入一个“中继器”放在文本框下方合适的位置，然后双击中继器进入下一页面，把页面内的矩形调整大小为W:325

H:25，并将四周边框取消，此处取消边框的作用也是为了美观。

　　回到默认页面，为拖入的中继器命名为“候选词”：

　　接着给“搜索框”元件添加第一个用例，若搜索框内文本改变时，需要先对文本添加判断条件，再执行动作，所以我们为第一个用例添加一个判断条件。

　　添加筛选动作于“候选词”这个中继器。

　　配置筛选函数，先添加一个局部变量，也就是搜索框中的文字。

　　先插入一个中继器/数据集的函数。

　　再插入一个字符串函数。

　　最后调整函数表达如下图所示，然后确定，筛选函数设置完毕。

　　此时添加显示“候选词”动作，表明符合筛选条件的情况下显示中继器内容。

　　然后为“文本改变时”状态添加第二个用例，设置当判断条件“<1时”。

　　隐藏“候选词”这个中继器。

　　最后，当页面载入时，设置中继器为“隐藏”状态。

　　完成以上所有步骤，实现就能搜索框联想词效果，最基本的思路就是“筛选—呈现”。

　　因此基于这个思路，我们需要做的就是提供筛选数据，而中继器是一个很好的数据容纳工具，然后筛选，符合条件则呈现。

　　这个实现效果并不复杂，至于文中的函数部分我已经做了拆分理解，如果实在难以理解可以尝试多去练习几次这个效果，对于没有写代码基础的同学是相对比较难理解。在多次练习后，就会有一定的认识，在日常中重要的是我们能够理解其中的思路。

　　以上教程就已经全部介绍完了，希望对你有帮助。如果有更多感兴趣的内容，可以访问Axure中文网，了解更多资讯。

本篇文章来源于：http://www.axurechina.cc/news/1374.html