2021年3月30日更新：项目关键词高亮显示的思路与示例代码学习

在制作微信小程序过程中，大家是否遇到过需要让某些搜索关键词更加显眼的问题？不必慌张，今天我会为大家逐一解析示例代码和实施细节。

需求背景

在项目开发阶段，我遇到了一个任务，那就是要查找相关信息并且让关键词特别突出。这就像在寻找商品或资料时，把搜索的关键词特别标出来，方便用户快速找到重要信息。明确了需求后，我马上开始寻找解决的办法。

初步思路

我计划使用split方法，根据搜索的关键词对后台返回的数据进行操作。接着，我使用indexOf函数来找到关键词，并为每个字符添加一个deep属性。如果deep属性的值为真，就进行高亮处理；如果为假，就保持原有显示。明确了这个方法后，我开始编写代码。

组件制作

list:[
 '武汉大学',
 '华中科技大学',
 '华中师范大学',
 '中南财经政法大学',
 '中国地质大学',
 '武汉理工大学',
 '华中农业大学',
 '武汉科技大学',
],

微信小程序的特点促使我将它设计成了一个显眼的模块。这样的设计既方便多次调用，也使得代码变得更加简洁。制作这个模块的过程并不繁琐，只需按照步骤进行操作。首先，我们可以模拟一些数据，接着在 data 中建立一个空数组，用来存放通过搜索关键词筛选得到的信息。

filterList:[],//过滤后的

搜索代码

在搜索过程中，wxml模板和搜索方法同样重要。页面上必须设置一个搜索框，让用户能够输入关键词。用户输入关键词后，搜索功能就会被触发。我们专门设计了一个叫作“高亮”的组件，它负责接收搜索结果和关键字参数。只有接收到这些信息，组件才能进行后续的处理工作。

// wxml

 

// 搜索方法
searchValue(e){
 let val = e.detail.value;
 this.setData({ value:val })
 if(val.length > 0){
  this.setData({ filterList:[] })
  let arr = [];
  for(let i = 0;i  -1){
    arr.push(this.data.list[i])
   }
  }
  this.setData({ filterList: arr })
 }else{
  this.setData({ filterList: [] })
 }
}

组件数据

组件启动时必须准确配置初始信息，这一点对于后续的渲染和处理极为关键。wxml 负责呈现搜索结果，并负责显示高亮。而关键在于组件的高亮数据处理部分，这部分直接决定了关键词是否能被准确高亮。

"usingComponents": {
  "highlight":"../../components/highlight/highlight"
 }

源码获取

源码已转换成小程序代码片段，并成功上传到了GitHub平台。在文章的最后，我附上了源码的链接，大家只需点击即可获取。下载后，仔细研究一番，就能应用到自己的项目中。有了这个示例，实现搜索关键词的高亮显示就变得容易多了！

在尝试给微信小程序添加搜索关键词高亮显示功能的过程中，你是否遇到了难题？不妨点个赞，把这篇文章转发出去。同时，你也可以在评论区提出你的疑问。

properties: {
 text:String,
 key:{
  type:String,
  value:'',
  observer:'_changeText'
 }
}