微信小程序实现搜索关键词高亮的示例代码

Carly ·

更新时间:2024-09-20

· 953 次阅读

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

到此这篇关于微信小程序实现搜索关键词高亮的示例代码的文章就介绍到这了,更多相关小程序搜索关键词高亮内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！

微信小程序程序示例关键高亮微信小程序