用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 资讯/观点 查看内容

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

Rolan 2021-4-1 00:48

1,前言项目中碰到一个需求,搜索数据并且关键词要高亮显示,接到需求,马上开干。先上效果图。源码已经做成了小程序代码片段,放入了GitHub了,文章底部有源码链接。2,思路博主第一时间想到的就是使用split,根据 ...


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

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 鹏多多 来自: cnblogs
便民服务

400-8826-226

电话服务热线时间:9:00 - 21:00

关注我们

微信公众号