Aure实现类百度搜索原型，关键字变色

为了便于大家理解这个字符串，我在这举例说明：

添加一个矩形a，添加一个新文本框b，文本框输入文字“孙燕姿2000年6月9日出道”以及原有的搜索文本框。

现在我们给搜索文本框编辑文本改变时案例——设置文本于矩形a=[[LVAR2.indexOf(LVAR1)]]

其中，局部变量LVAR1=搜索框文本，LVAR2=文本框b文本。

按F5进行预览，效果如下：

从上面效果，我们可以看出，只要是文本框b有的，都是一个大于-1的值，如果输入了文本框b没有的，则输出文本为-1。

因此，通过这个案例，我们不难做到，中继器筛选函数设为：[[Item.Column0.indexOf(LVAR1)>-1]]

其中，局部变量LVAR1为搜索框文本。

通过此方法就可以筛选出我们想要的关键字搜索结果。

当我们通过这种方式，已经可以筛选出我们想要的数据库后，我们需要完成如何给我们检索的文字变色。

变色就意味必须要让系统知道我们输入的是什么文字。

目前，axure可输出文字的有三个字符串函数：LVAR1.slice(start,end)，LVAR1.substr(start,length)以及LVAR1.substring(from,to)。

在这里，我们选择LVAR1.slice(start,end)。另外两个函数，如果不太懂，可以网上搜一搜，这里不做详解。

[[LVAR.slice(start,end)]]是指：返回LVAR从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符。这里的start和end指的是字符串所在的位置，0代表第一个位置，-1代表倒数第一个位置，而函数最后输出来的就是具体的文字。

举例来解释此函数：

准备好文本框b和矩形a。

设置文本框b鼠标单击时案例：设置文本于矩形a=[[LVAR1.slice(0,5)]]，其中LVAR1为文本框b文本。

（0,5）指的是第一个字符到第五个字符，预览结果如下：

也就是说，如果能够知道我们输入的文字在筛选出来的数据库中所在的位置，则能读取出我们想要的文字。

我们通过结合上一步的函数，可以推导 出：

整个函数指的就是在筛选后的数据库里，提取出文本框里的文字。也就是说假如现在只有这一个函数，我们输入”姿“，最后在数据库里，只会显示”姿“。现在我们在函数的富文本编辑里，给它换个字体颜色，就可以完成变色的目标，效果如下：

我们已经完成了筛选换色目标，接下来就是还原前后两部分文字。不难想象，既然我们知道了关键字的位置，就可以推到出前后两部分，前部分，就应该是起始位置0，到我们关键字的起始位置；而后半部分，即是关键字最后一个字的位置，到结束止。具体函数如下：

最后，整个百度搜索的方式就制作出来了。

原型预览：http://er0yg0.axshare.com

原型下载： http://pan.baidu.com/s/1bn8mqsv

本文为作者@梁漩智 原创投稿发布，转载请注明来源于产品经理并附带本文链接

关键字：Axure, Axure教程, 文本, 函数

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！