百度搜索提示是如何实现的

2019-10-08 15:35 来源:未知

百度寻觅

当我们采取寻觅引擎输加入关贸总协定协会键词的时候,找出引擎会依靠搜索词模糊相称推荐一些有关的原委在找出框的下方彰显,这里也隐含了大家的查找记录。点击找出按键,寻觅引擎就能够进行找寻,利用爬虫抓取的网页,遵照一定的算法再次来到寻觅结果列表。 那么这么的原型交互功用,是还是不是可以因此Axure达成制作了?那正是前几日为咱们解说的互动案例,借助中继器完结百度搜索提醒的功能。

本案例的上书适用于具备自然的Axure使用基础的人手,关于工具的操作步骤不做详细讲明。本文呈报的主要在于逻辑的梳理以及一些启发性的笔触与措施,希望能够协理大家做出更炫丽的互相作用。


01 希图元件

该案例中必要利用的构件有文本框、矩形按键和中继器。文本框用于输入寻找词,这里的连串需求设置为寻觅;矩形开关可以直接从元件库中拖拽至寻觅框左边,并将按键中的文字修改为“搜索”;中继器用来展现提醒词列表,即基于查找内容索引出来的列表,这里须求小心将中继器转变为动态面板,因为动态面板能够根据剧情自动增添尺寸,默许遮蔽动态面板

元件筹划部分关键讲明中继器在本案例中的应用,首先为中继器数据集column0这一列预设一些内容(iphone、iphone7、iphone8、iphone8plus、iphonex、iphonex价格、iphonex配置、iphonex换屏、二手iphonex、维修iphone),共有10项数据内容;然后在为中继器的项设置一个鼠标悬停的交互样式,填充色设置为中绿;最终在将中继器项的边框颜色去掉。至此,中继器的显得效果完成了,看上去与百度的成效基本一致。

02 交互设置

a 中继器

此间关键有五个彼这事件,第七个为中继器设置每项加载时事件(注意这里的相互设置的对象是中继器不是项),目标是为中继器的项加载内容,在文书设置中校中继器项的值设置为函数[[Item.Column0]];第二个为中继器的项设置单击事件,在文书设置少将寻觅框的值设置为项的值,即函数[[this.text]],并逃匿中继器动态面板。

加载中继器的项

将项的值传递给文本寻觅框

b 文本框

为文本框增添三个文书改动事件,当文本框的原委改造时,大家期待达到如此的功用:显示中继器动态面板,移除在此之前的筛选结果,重新遵照新的找出词举行索引筛选。这里要求表达的是加多新的筛选时,必要设定三个标准,即当中继器数据汇总包罗寻找的剧情时,试行筛选并出示出来,要求插入那样二个函数[[TargetItem.Column0.indexOf(LVAR1)>-1]]实践新的筛选。文本更换事件还必要加上另三个用例case2,用例中加多二个尺度即只要文本框的源委为空,则进行的动作为隐匿中继器动态面板,记得将case2切换为if,case2经常默感到else if。

文本框设置文本改动事件

c 搜索开关

首先须要想清楚,点击寻找开关后大家盼望达到的成效是什么的。要是输入的找出词不在中继器数据集里面,那时候我们需求在中继器数据集中增添这一条数据;再一次点击开关,首先移除此前的万事筛选, 增加新的筛选,这里的筛选法则为准确索引。梳理清楚逻辑准绳后,上面我们来看下怎么样设置交互事件。

为寻觅开关设置单击事件,增多第三个用例,在编写条件中编辑函数,首先将中继器设置为一些变量LAV奥迪Q51,然后插入函数[[LVAR1.itemCount]](筛选结果的多寡),在编排条件中设置值等于0,增添动作数据集增添行,在加多行到中继器时,先将文本框定义为部分变量LVA中华V1,然后在将那个局地变量增加到行。

增多第贰个用例case2,动作设置中第一移除全体筛选,然后在累加新筛选中安装筛选标准为[[TargetItem.Column0==LVAR1]]。LVAHaval1为文本框定义的变量,TargetItem.Column0表明的乐趣为中继器数据集Column0这一列数据,这里的多寡包蕴在此以前筛选的结果。

搜寻开关设置单击事件

筛选结果的多寡并不等于数据集项的数据,大家得以做个实验,增添多个开关,多少个展现筛选结果的数量,三个显得数据集项的数目。在中继器项的加载事件中增加多少个动作,设置七个按键的文本值分别为函数[[Item.Repeater.itemCount]]和[[Item.Repeater.dataCount]]。(设置的截图可参看上文 加载中继器的项

03 最终的总括

到此截止,模拟百度找出提醒的相互效用已经形成了,预览你的原型,欣赏你麻烦半天的著述啊。本案例中的爱戴在于中继器的归结使用,中继器是Axure7.0版本之后新增的意义,中继器能够看做成一个本地的小型数据库。熟识运用以后,还足以兑现电商列表的筛选,管理后台的口径查询或是在线随机抽取奖品等功效。

本案例的源文件链接: 密码:h3ta


 附:中继器函数表达

Repeater 用途:中继器的对象。Item.Repeater即为Item所在的中继器对象。

visibleItemCount 用途:中继器项目列表中可知项的数目。比如:项目列表共有15项,分页突显为每页6项。当项目列表在第1、2页时,可知项数据为6;当项目列表在第3页时,可知项数据为3。

itemCount 用途:获取中继器项目列表的总的数量据,只怕叫加载项数据。暗中同意景况下项目列表的总的数量量会与中继器数据汇总的数据行数量一样,可是,假诺展开了筛选,项目列表的总的数量量则是筛选后的数量,那个数据不受分页影响。

dataCount 用途:获取中继器数据汇总的数量据行的总的数量据。

pageCount 用途:获取中继器分页的总的数量量,即能够获得分页后共有多少页。

pageIndex 用途:获取中继器项目列表当前展现内容的页码。

www.308877.com,Item 用途:获取数据集一行数据的集聚,即数据行的指标。

TargetItem 用途:指标数据行的对象。

Item.列名 用途:获取数据行中钦命列的值。

index 用途:获取数据行的索引编号,编号开头为1,由上至下每行递增1。

isFirst 用途:决断数据行是不是为第1行;若是是第1行,重临值为“True”,不然为“False”。

isLast 用途:判别数据行是或不是为最末行;若是是最末行,再次回到值为“True”,不然为“False”。

is伊芙n 用途:判别数据行是不是为偶数行;尽管是偶数行,重回值为“True”,不然为“False”。

isOdd 用途:决断数据行是还是不是为奇数行;假诺是奇数行,再次来到值为“True”,不然为“False”。

is马克ed 用途:推断数据行是还是不是为被标识;假如被标识,重临值为“True”,不然为“False”。

isVisible 用途:剖断数据行是或不是为可知行;假若是可知行,重返值为“True”,不然为“False”。

TAG标签:
版权声明:本文由澳门国际银河备用网址发布于www.308877.com,转载请注明出处:百度搜索提示是如何实现的