axure文本框eamil，url出错怎么高亮提醒

发布网友发布时间：2022-04-21 22:19

共1个回答

热心网友时间：2023-10-01 02:08

当一个特定的字段在搜索结果中高亮显示时，高亮显示本质上就是“突出显示”。有许多显示方式，例如，字体是粗体或红色简单地说，它不同于其他普通文本。今天，作者将教你如何使用中继器来制作一个用户友好、高保真、高亮显示的搜索框原型模板备注：为准备学习Axure、正在学习Axure的小伙伴提供了专业系统的Axure自学视频课，视频教学，知识点清晰，方便快速地掌握~

Axure制作高亮搜索效果步骤：

一、原理介绍首先我们讲一下怎么讲一段内容里的某段文字变红的原理，主要用到文本切割的方法，总共用到三个函数：

length函数，可以得出搜索文本的长度

indexof，可以计算出搜索文本在原来文本的第几位

slice，可以截取文本的一部分简单来说其实就是分成三段，开始到搜索文本之前，搜索文本，搜索文本后面的文本，用设置富文本的交互就可以将中间那段变成红色即可。

例如整段文本为Axure高保真原型，搜索内容为高保真，那我们通过length函数获取到高保真的长度为3，在整段文本(Axure高保真原型)中是第5位，这里需要注意indexof函数是从0开始的，我们看到的第一位实际是第0位，第二位就是第一位。

然后我们就用slice函数来分隔，首先取得获取高保真前面的内容Axure，这是第一段；第二段就是输入框里面的内容——高保真；最后一段就是搜索文字后面的内容——原型，其实就是搜索文字所在位置+长度后面的内容。

二、材料准备材料包括中继器、输入框、文本标签、、搜索按钮、矩形、外框等等，下面我们一个个展开介绍。

1.中继器中继器是最重要的材料，因为只有通过中继器才可以实现模糊搜索。

中继器内部表格我们需要2列：

Column0：在里面填写显示的选项或者说推荐内容、历史记录

Column1：这里填写一般不会搜索到的文本即可，只用于后续逻辑处理

2.中继器内部元件以下所有元件都是放在中继器内部：

文字矩形（中继器内部自带的矩形），命名为新文本，这里我们改一下样式即可，也可以像案例一样增加移入变色的效果。

文本标签，命名为搜索文字，默认隐藏，只用于逻辑交互。

文本标签，命名为全部文字，默认隐藏，只用于逻辑交互。

文本标签，命名为记录文本位置，默认隐藏，只用于逻辑交互，默认值为0，用于记录搜索文字在整个文本中的位置。

文本标签，命名为记录文本长度，默认隐藏，只用于逻辑交互，默认值为0，用于记录搜索文字的长度。

3.搜索元件搜索元件有输入框、搜索按钮和背景矩形，具体样式可以自己设置：

4.弹出组合弹出组合其实就是上面的中继器和一个背景矩形组成，弹出组合默认隐藏即可。

三、交互制作1.中继器每项加载时交互首先是用设置文本的交互，将Column0的值设置到全部文字的元件，将Column1的值设置到搜索文字的元件。然后触发搜索文字单击时的交互。

这里有些电脑速度比较慢的话，可能会有一个bug就是还没设置完文本就先触发了事件，如果出现这种情况的话可以在设置文本和触发事件之间建一个等待10ms的交互。

2.搜索文字鼠标单击时搜索文字鼠标单击的交互，实际就是将全部文本转化成富文本的一个交互，然后将富文本设置到新文本内。

首先我们也是要用设置文本的交互，记录搜索文本的长度，以及搜索文本在全部文本里面的位置。

然后根据他的文字，在分情况讨论。

3.搜索文字鼠标双击时因为上面分了情况，所以要用触发事件触发到双击再继续写条件。

第一种条件是记录文本位置的值>=0,换句话说就是搜索到结果，那我们设置新文本的值为富文本，分成三段，具体逻辑可以看第一大点的思路，第一段就是全部文字的slice（0，记录文本的位置），这段就是搜索文字前的文本；第二段就直接是搜索文字，这里把它设置为红色即可，最后一段就是slice（记录文本的位置+记录文本长度），即搜索文字后面的内容。

如果第一种情况不成立，即记录文本位置的值小于0，那我们直接设置新文本的值为中继器内Column0的值即可，就是没有找到对应的文本，所以不需要做变色处理。

4.文本框文字改变时这里也是分两种情况：第一种是文本框内的文字不为空，即有输入内容。

我们就标记全部行，然后更新全部航的column1列，将输入框的值设置进去，这里相当于将输入框的值传进去。然后中继器会自动重新加载，相同的文字就会根据上面的交互变红。

然后我们在用筛选事件，对column0列筛选，筛选出对应的行内容，这里我们用到indexof的函数，如果结果>-1，即该行有对应的内容。

第二种情况就是文本框的值为控制，即没有搜索内容，这里其实我们移除中继器筛选就可以了。

但是我们同样也要标记全部行，然后更新全部行里面的column1的列，因为这列代表搜索内容，我们将它填写一串打乱的字符即可，放置误搜索。

5.文本框获取焦点和失去焦点时其实这里很简单，就是获取焦点是显示弹出弹窗，这里选择灯箱效果和置顶；失去焦点时隐藏弹窗组合即可。

6.后续可增加的一些交互其实做到第五步就完成了这个原型，后续试一下更加美化，例如移入输入框变色，获取焦点又变成另一种颜色，这些都是可以根据自己的喜好增加的。或者还有一些，例如点击搜索按钮或者点击内容跳转到对应的页面或者对其他中继器进行筛选，这些都可以根据自身需要增加。

以上即是关于“Axure怎么制作高亮搜索效果？”的分享内容了，希望能够帮助到你~！更多Axure原型技巧，尽在Axure相关文章！很多小伙伴学习Axure都选择了在网上学习，但是很多都是东拼西凑的学，以致于学习到和实际操作的可能就有所出入了~所以学习Axure，还是系统化比较好！选择的Axure自学视频课，相信能够给予你知识的收获以及动手实操的经验~

全部频道

axure文本框eamil，url出错怎么高亮提醒