在制作微信小程序过程中，大家是否遇到过需要让某些搜索关键词更加显眼的问题？不必慌张，今天我会为大家逐一解析示例代码和实施细节。
需求背景
在项目开发阶段，我遇到了一个任务，那就是要查找相关信息并且让关键词特别突出。这就像在寻找商品或资料时，把搜索的关键词特别标出来，方便用户快速找到重要信息。明确了需求后，我马上开始寻找解决的办法。
初步思路
我计划使用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'
}
}
