1, the preface

When you encounter a requirement in a project, search the data and highlight the keyword. When you receive the requirement, start immediately. Let’s start with the renderings. The source code has been made into a small program snippet, put into GitHub, the article at the bottom of the source link.

2, the train of thought

The blogger’s first thought was to use split to process the data returned in the background according to the keyword searched. Then indexOf would find the keyword and add deep to each word. If deep is true, it would be highlighted; if deep is false, it would be normal. Because it is a small procedure, so the main building directly made a highlighted component, the code is very simple, the implementation steps are as follows.

3. Code logic

The simulated data is as follows

list:[
  'Wuhan University'.Huazhong University of Science and Technology.Central China 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,].Copy the code

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

filterList:[],// After the filter
Copy the code

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 methods
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: []})}}Copy the code

Defines a highlight component called Highlight

"usingComponents": {
   "highlight":".. /.. /components/highlight/highlight"
 }
Copy the code

Pass each item and key parameter searched on 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>
Copy the code

Receive in the component

properties: {
  text:String.key: {type:String.value:' '.observer:'_changeText'}}Copy the code

Initial data for the component

data: {
  highlightList: [].// Processed data
}
Copy the code

The component’s WXML

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

Highlight data processing for components

// 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 })
 }
Copy the code

Source making address: https://github.com/pdd11997110103/ComponentWarehouse

If you think it is helpful, I am @pengduo, welcome to like and follow the comments; END

The articles

  • Micro channel small program custom Tabbar, attached detailed source code
  • Enumerative JS practical and powerful operator & operator
  • Wechat apPLETS API interaction custom encapsulation
  • Request encapsulation of wechat applets
  • The use of try and catch in javaScript and breaking out of forEach loops

Personal home page

  • CSDN
  • GitHub
  • Jane’s book
  • Blog garden
  • The Denver nuggets