目录

• 1，前言
• 2，思路
• 3，代码逻辑

1，前言

项目中碰到一个需求，搜索数据并且关键词要高亮显示，接到需求，马上开干。先上效果图。源码已经做成了小程序代码片段，放入了GitHub了，文章底部有源码链接。

2，思路

博主第一时间想到的就是使用split，根据搜索的关键词，处理后台返回的数据，然后indexOf找到关键字，给每个字添加deep字段，deep为true，则高亮，为false，则正常。由于是小程序，所以楼主直接做成了一个高亮组件，代码很简单，实现步骤如下。

3，代码逻辑

模拟数据如下

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

在data中定义了一个空数组，用于存放根据搜索key过滤后的数据

filterList:[],//过滤后的

搜索的wxml和方法

// wxml
<view class="search_box"><input type="text" placeholder="请输入武汉的985/211大学" bindinput="searchValue" class="search"/>
</view>// 搜索方法
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 < this.data.list.length;i++){if(this.data.list[i].indexOf(val) > -1){arr.push(this.data.list[i])}}this.setData({ filterList: arr })}else{this.setData({ filterList: [] })}
}

定义了一个高亮组件highlight

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

在页面中将搜索出来的每一项item和key参数传递给组件

<view class="list_li" wx:for="{{ filterList }}" wx:key="index" data-index="{{ index }}" bindtap="pitchOn"><highlight text="{{ item }}" key="{{ value }}" />
</view>

在组件中接收

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

组件的初始数据

data: {highlightList:[],//处理后的数据
}

组件的wxml

<text class="{{ item.deep ? 'green' : '' }}" wx:for="{{ highlightList }}" wx:key="index">{{ item.val }}</text>

组件的高亮数据处理

// 非空过滤_changeText(e){if(e.length > 0 && this.properties.text.indexOf(e) > -1){this._filterHighlight(this.properties.text, e);}},/*** 关键字高亮处理* @param { String } text - 文本* @param { String } key - 关键字*/_filterHighlight(text, key){let textList = text.split("");let keyList = key.split("");let list = [];for(let i = 0;i < textList.length;i++){let obj = {deep:false,val:textList[i]}list.push(obj);};for(let k = 0;k < keyList.length;k++){list.forEach(item => {if(item.val === keyList[k]){item.deep = true;}})}this.setData({ highlightList:list })}

源码GitHub地址：https://github.com/pdd11997110103/ComponentWarehouse

如果看了觉得有帮助的，我是@鹏多多i，欢迎 点赞 关注 评论；
END

公众号

往期文章

• javaScript中try和catch的使用和跳出forEach循环
• 细数JS中实用且强大的操作符&运算符
• 微信小程序API交互的自定义封装
• 微信小程序request请求的封装

个人主页

• CSDN
• GitHub
• 简书
• 博客园
• 掘金

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！