Axure实现类百度搜索原型,关键字变色

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

用中继器制作筛选,使用函数变量制作关键字变色

整个步骤关键有两步:

第一步,我们要通过中继器制作好我们所需的数据库,让用户可以搜索到;

我们使用中继器进行编辑,就是希望能够通过中继器所带有的筛选功能可以对我们所需要的信息进行筛选。这里的信息可以随便编辑,我在这里用歌手名来进行数据库展示。

拖拽中继器:

QQ截图20150602113841

编辑数据:

QQ截图20150602114025

设置赋值:

QQ截图20150602114111

得到数据库:

QQ截图20150602114150

第二步,通过建立搜索框,对搜索框进行编辑案例。

这一步的难点在于:

  1. 如何筛选出我们想要的数据;
  2. 如何对我们选出的内容进行变色。

我们拖拽一个文本框,并命名为搜索文本框,然后编辑案例:文本改变时:

QQ截图20150602114429

首先,针对第一点,中继器自带筛选功能,我们可以在文本改变时案例编辑里找到中继器,然后选择筛选功能。

QQ截图20150601181724

现在问题就出现了:中继器只能做到筛选内容与你的数据库内容的位置一一对应。

举例来说:

我想要通过搜索”姿“来筛选出”孙燕姿“,中继器是做不到的。它只能做到,搜索”孙燕姿“或者按顺序搜索”孙“或者”孙燕“才来筛选出”孙燕姿“。这个大家可以试一试。

因此,我们必须换个思路。在这里我们使用的是通过字符串函数”[[LVAR.indexOf(‘searchValue’)]]“进行筛选。

这个函数的意思是从头到尾地检索字符串 LVAR,看它是否含有子串 searchValue。如果找到一个 searchvalue,则返回 searchvalue 第一次出现的位置。如果要检索的字符串值没有出现,则该方法返回 -1。

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

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

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

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

QQ截图20150602120455

QQ截图20150602120800

按F5进行预览,效果如下:

QQ截图20150602120835

QQ截图20150602120847

QQ截图20150602120904

QQ截图20150602120917

从上面效果,我们可以看出,只要是文本框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)指的是第一个字符到第五个字符,预览结果如下:

QQ截图20150602122425

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

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

QQ截图20150601120018

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

QQ截图20150602123013

QQ截图20150602123124

QQ截图20150602123147

QQ截图20150602123156

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

前部分函数:[[Item.Column0.slice(0,Item.Column0.indexOf(LVAR1))]],即提取首字符,到我们搜索文本框的第一个字符(不包括)止。

后部分函数:[[Item.Column0.slice(Item.Column0.indexOf(LVAR1)+LVAR1.length)]],即提取搜索文本框输入最后一个文字位置到整个数据库文本的结束位置。

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

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

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

 

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

您的赞赏,是对我创作的最大鼓励。

评论( 23

登录后参与评论
  1. 楼主谢谢你啊,这篇文章很有用。
    [[Item.Column0.indexOf(LVAR1)>-1]] 这个函数帮了我大忙。

    回复
  2. 我这边也没法变色,下载你的原型也不变色,但是通过axshare试你的可以变~估计是axure版本问题,将光标插到已调色的函数段中格式栏中也没显示红色
    原型预览:http://jlsvpg.axshare.com
    源文件下载:http://pan.baidu.com/s/1gdvwkOr

    回复
    1. 回复

      另外,在实际应用,在输入关键词之前,搜索框下展示的联想关键词应该是隐藏的,清空搜索框内容后,也是不应显示的,这个该如何实现,求赐教~ :?:

  3. 怎么让他显示不在是True和False,怎么筛选完后显示中文啊

    回复
  4. 数据集在哪里编辑

    回复
  5. 对于小白还是有点吃力

    回复
  6. 作者 你应该先讲解,演示过整个过程,再把你发现的问题进行解说。
    因为小白是想看到整个操作过程,模仿后自己感悟,再看你提出的问题跟解答。

    回复
  7. 这篇文章写得很好,可以加深小白对中继器跟局部变量的认识与理解。

    回复
    1. 回复

      3q

  8. :?: 会不会要打补丁

    回复
    1. 回复

      我感觉好多颜色不变的 可能是版本问题或则是汉化包的影响 现在我下载官方英文版 正常显示

  9. 你好,我按照你的提示操作失败了,要么是能筛选,要么是可以变色,就是不能两个一起实现,希望帮忙解决。http://pan.baidu.com/s/1eQhdlUq 麻烦帮看看

    回复
    1. 我刚才下载看过了,问题是设置文字于添加局部变量的LVAR1应该更改为元件文字searchtextbox

    2. 回复

      谢谢亲的回复,昨天也是把自己高头晕了,后来自己重新整理思路,我不是在文本框旁边放了个label用来显示截取数据吗?我就这样一步步做下来发现,我的是没错,最后下载最新版测试,可以变颜色了。给你的版本改的有点乱了,我自己都晕了。具体做法比楼主的更加精简:[[Item.Prop1.slice(0,Item.Prop1.indexOf(LVAR1))]][[LVAR1]][[Item.Prop1.slice(Item.Prop1.indexOf(LVAR1)+LVAR1.length)]]

      [[LVAR1]]:需要加红色,这是文本框的值,直接使用不需要截取,当然楼主截取可以多学习一些字符串的使用技巧。

      我是这样一步步做下来的:(文本框左侧有个名称叫 testtxt 的 Label 用来显示测试数据)

      1. [[LVAR1]]:测试可以显示

      2. [[Item.Prop1.indexOf(LVAR1)]][[LVAR1]]:依然正常显示,结果 数字+截取字符,2英语

      3. [[Item.Prop1.slice(0,Item.Prop1.indexOf(LVAR1))]][[LVAR1]]:正常显示

      4. [[Item.Prop1.slice(0,Item.Prop1.indexOf(LVAR1))]][[LVAR1]][[Item.Prop1.slice(Item.Prop1.indexOf(LVAR1)+LVAR1.length)]]:注意最后一个slice是只有一个参数,我当时在这里也自己多加了参数,搞得很凌乱。selice(start,end),end可以省略,省略默认读取到最后一个字符。

      通过一步步的测试 让自己思路变得清晰起来,明天来更新我照做的,里面包含了string的所有函数。

    3. 回复

      下载:http://pan.baidu.com/s/1gdm0Rz9

  10. :roll:

    回复
  11. 为什么我的函数a=[[LVAR2.indexOf(LVAR1)]],一直返回-1,请大神指导。。。我的axure版本是7.0

    回复
    1. 回复

      你看看,你的两个局部变量是否赋值正确

    2. 回复

      我的也是一样的问题

  12. 实际应用的时候关键字没有变色哎

    回复
    1. 回复

      我的也是这样额

    2. 回复

      富文本里面要更改颜色设置

  13. 楼主给讲解一下axure的函数,整理一下函数即使用

    回复
加载中