Sample code for highlighting search keywords in WeChat mini program

1. Introduction

When you encounter a requirement in the project, search for data and highlight the keywords. When you receive the requirement, start working immediately. Here are the renderings first. The source code has been made into a small program code snippet and put into GitHub. There is a source code link at the bottom of the article.

2. Ideas

The first thing the blogger thought of was to use split. According to the searched keywords, he processed the data returned by the background, then found the keywords with indexOf, and added a deep field to each word. If deep is true, it will be highlighted, and if it is false, it will be normal. Since it is a small program, the OP directly made it into a highlight component. The code is very simple and the implementation steps are as follows.

3. Code logic

The simulated data is as follows

list:[
 'Wuhan University',
 'Huazhong University of Science and Technology',
 'Huazhong Normal University',
 'Zhongnan University of Economics and Law',
 'China University of Geosciences',
 'Wuhan University of Technology',
 'Huazhong Agricultural University',
 'Wuhan University of Science and Technology',
],

An empty array is defined in data to store the data filtered by the search key

filterList:[], //Filtered

wxml and methods for searching

// wxml
<view class="search_box">
 <input type="text" placeholder="Please enter the 985/211 university in Wuhan" bindinput="searchValue" class="search"/>
</view>

// Search method 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: [] })
 }
}

Defines a highlight component highlight

"usingComponents": {
  "highlight":"../../components/highlight/highlight"
 }

Pass each item and key parameter found in the page to the component

<view class="list_li" wx:for="{{ filterList }}" wx:key="index" data-index="{{ index }}" bindtap="pitchOn">
 <highlight text="{{ item }}" key="{{ value }}" />
</view>

Receive in component

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

Initial data of the component

data: {
 highlightList:[], //Processed data}

Component's wxml

<text class="{{ item.deep ? 'green' : '' }}" wx:for="{{ highlightList }}" wx:key="index">{{ item.val }}</text>

Component highlight data processing

// Non-empty filter_changeText(e){
  if(e.length > 0 && this.properties.text.indexOf(e) > -1){
   this._filterHighlight(this.properties.text, e);
  }
 },
 /**
 * Keyword highlighting* @param { String } text - text* @param { String } key - keyword*/
 _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 })
 }

Source code GitHub address: https://github.com/pdd11997110103/ComponentWarehouse

This concludes this article about the sample code for implementing search keyword highlighting in WeChat mini-programs. For more relevant mini-program search keyword highlighting content, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: