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
简书
博客园
掘金

微信小程序实现搜索关键词高亮相关推荐

微信小程序实时搜索并高亮关键字
微信小程序实现实时搜索并高亮关键字的功能效果一.效果图二.实现流程: 1.在文本框中输入关键字key,如"比赛",检索出比赛相关的列表 key = 小程序 2.处理结果列表:在 ...
微信小程序之搜索关键字高亮
最近项目中有个需求,就是搜索列表中,对应的搜索关键词要高亮,即显示不同的颜色.百度了一番加上自己的理解,实现了该功能 wxml: <view class="search-box&quo ...
微信小程序页面搜索框查询（无后台接口情况下）
微信小程序页面搜索框查询(无后台接口情况下) 效果图: wxml <view class="container"><view class="goodsl ...
微信小程序微信小程序地图搜索、地图搜索点点击出callout气泡标题说明
实现效果:根据楼盘名称实现地图定位.周边搜索: 代码: html <view class="mapinfo"><view class="mapbd&qu ...
原生微信小程序，搜索框（search）组件
原生微信小程序,搜索框(search)组件首先创建组件及两个跳转页面,第一个是搜索框所在的页面(首页),第二个是搜索详细页搜索框的本质是:搜索框不是input,而是navigate,跳转到专门的搜 ...
微信小程序input搜索解决中文问题(输入拼音) 实时搜索节流处理(bindinput 节流)
微信小程序input搜索解决中文问题(输入拼音) & 实时搜索节流处理(bindinput 节流) 问题微信小程序输入拼音的时候, 还没有完全输入完成, bindinput就会触发, 当我输 ...
微信小程序的搜索和重置功能
微信小程序的搜索和重置功能 wxml <template><div><div class="input-wrap"><el-inputse ...
微信小程序自定义搜索框（searchbar）
微信小程序自定义搜索框(searchbar) 样式截图展示: 功能描述:微信小程序页面需要加入搜索框时,可以直接引用到页面中使用,当用户未输入任何关键字时如第一张图所示,当用户输入要搜索的关键字时如第 ...
微信小程序顶部搜索框滑动伸缩效果的实现
项目场景:微信小程序顶部搜索框随页面滑动伸缩效果提示:实现搜索框跟随用户滑动页面,实现伸缩效果微信小程序顶部搜索框滑动伸缩动画的实现实现效果: 滑动前滑动后实现原理提示:主要用到了微信小 ...

微信小程序实现搜索关键词高亮

目录

1，前言

2，思路

3，代码逻辑

微信小程序实现搜索关键词高亮相关推荐

最新文章

热门文章