脚本宝典收集整理的这篇文章主要介绍了微信小程序实现搜索关键词高亮的示例代码,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
项目中碰到一个需求,搜索数据并且关键词要高亮显示,接到需求,马上开干。先上效果图。源码已经做成了小程序代码片段,放入了GITHub了,文章底部有源码链接。
博主第一时间想到的就是使用split,根据搜索的关键词,处理后台返回的数据,然后indexOf找到关键字,给每个字添加deep字段,deep为true,则高亮,为false,则正常。由于是小程序,所以楼主直接做成了一个高亮组件,代码很简单,实现步骤如下。
模拟数据如下
在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
在页面中将搜索出来的每一项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
到此这篇关于微信小程序实现搜索关键词高亮的示例代码的文章就介绍到这了,更多相关小程序搜索关键词高亮内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!
以上是脚本宝典为你收集整理的微信小程序实现搜索关键词高亮的示例代码全部内容,希望文章能够帮你解决微信小程序实现搜索关键词高亮的示例代码所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。