感谢导语：“高亮”即特定字段在搜索结果中高亮显示，简单来说就是让该文本与其他普通文本有所区别。那么如何用中继器制作高亮搜索结果呢？一起来看一下吧。
高亮其实就是Highlight，即特定字段在搜索结果中高亮显示。显示方式又很多，例如，字体加粗或者字体变红……简单来说就是和其他普通文本有所区别。
今天就教大家怎么用中继器制作一个既方便使用，同时又具备高保真效果高亮搜索框得原型模板，具体效果如下图所示，简单来说就是可以模糊搜索中继器内数据得同时，将对应搜索文字得文本变红。
原型预览地址：ds0b48.axshare/#g=1
那下面我们一起开始制作吧。
一、原理介绍首先我们讲一下怎么讲一段内容里得某段文字变红得原理，主要用到文本切割得方法，总共用到三个函数：
- length函数，可以得出搜索文本得长度indexof，可以计算出搜索文本在原来文本得第几位slice，可以截取文本得一部分
简单来说其实就是分成三段，开始到搜索文本之前，搜索文本，搜索文本后面得文本，用设置富文本得交互就可以将中间那段变成红色即可。
例如整段文本为Axure高保真原型，搜索内容为高保真，那我们通过length函数获取到高保真得长度为3，在整段文本(Axure高保真原型)中是第5位，这里需要注意indexof函数是从0开始得，我们看到得第壹位实际是第0位，第二位就是第壹位。
然后我们就用slice函数来分隔，首先取得获取高保真前面得内容Axure，这是第壹段；第二段就是输入框里面得内容——高保真；最后一段就是搜索文字后面得内容——原型，其实就是搜索文字所在位置+长度后面得内容。
二、材料准备材料包括中继器、输入框、文本标签、、搜索按钮、矩形、外框等等，下面我们一个个展开介绍。
1. 中继器中继器是最重要得材料，因为只有通过中继器才可以实现模糊搜索。
中继器内部表格我们需要2列：
- Column0：在里面填写显示得选项或者说推荐内容、历史记录Column1：这里填写一般不会搜索到得文本即可，只用于后续逻辑处理
以下所有元件都是放在中继器内部：
文字矩形（中继器内部自带得矩形），命名为新文本，这里我们改一下样式即可，也可以像案例一样增加移入变色得效果。文本标签，命名为搜索文字，默认隐藏，只用于逻辑交互。文本标签，命名为全部文字，默认隐藏，只用于逻辑交互。文本标签，命名为记录文本位置，默认隐藏，只用于逻辑交互，默认值为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. 后续可增加得一些交互其实做到第五步就完成了这个原型，后续试一下更加美化，例如移入输入框变色，获取焦点又变成另一种颜色，这些都是可以根据自己得喜好增加得。或者还有一些，例如搜索按钮或者内容跳转到对应得页面或者对其他中继器进行筛选，这些都可以根据自身需要增加。
做好以后，当我们再次使用时，只需要在中继器得表格里填写选项即可，自动生成交互效果，是不是很方便呢？
那以上就是本期得全部内容了，感谢您得阅读，我们下期见~88
感谢由 等做产品但不是经理 来自互联网发布于人人都是产品经理，未经许可，禁止感谢
题图来自Unsplash，基于CC0协议
