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

本篇内容介绍了“微信小程序搜索关键词高亮怎么实现”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

项目中碰到一个需求，微信小程序搜索数据并且关键词要高亮显示，接到需求，马上开干。先上效果图。

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);   } },  _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 }) }

“微信小程序搜索关键词高亮怎么实现”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！