欢迎光临seo外链资源网站,我们为你英文友情链接的信息及服务

seo外链资源

一个资源好的推广优化外链发布网站,为你解决外链获客难题

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

作者:jcmp      发布时间:2021-04-16      浏览量:0
一、1,前言项目中碰到一个需求,搜索数据

一、1,前言

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

二、2,思路

三、3,代码逻辑

模拟数据如下

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

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

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 < 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参数传递给组件

在组件中接收

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

组件的初始数据

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

组件的wxml

{{ item.val }}

组件的高亮数据处理

// 非空过滤 _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。

往期文章

个人主页