小程序实现搜索关键词高亮功能

小程序实现搜索关键词高亮功能

今天开发小程序的时候, 有一个搜索功能是需要有 关键词变色 的效果, 第一次做小程序的 “关键词变色” 功能, 没什么思路, 果断百度, 然后找到一个方法可以实现, 虽然可以实现效果, 但是在搜索列表数据比较多的情况下还是会有一点点影响, 会导致显示速度会有一点延迟, 于是又开始了第二次尝试, 打算自己写, 这个时候想到了小程序 rich-text 组件; 对呀、我为什么不直接用 rich-text 组件来试一下呢, 说做就做, 果然使用 rich-text 还是可以的, 达到了预期, 以下就是两种方案的代码与效果图;

第一个方案链接: https://www.cnblogs.com/demodashi/p/9802023.html

效果图

代码如下, 不喜勿喷

wxml文件

<view >第一种方案</view>
<view class="one-wrapper">
  <input class="one-input"
         placeholder="请输入搜索内容"
         bind:input="oneInput"></input>
    <scroll-view scroll-y>
      <block wx:for="{{oneSearchList}}"
             wx:key="index"
             wx:for-item="key_item">
        <view class="one-view">
          <block wx:for="{{key_item}}" 
                 wx:for-item="key_obj" 
                 wx:for-index="idx"
                 wx:key="idx">
            <text wx:if="{{key_obj.key == true}}" 
                  class="action"  
                  bind:tap="optionsCompany">{{key_obj.str}}</text>
              <text wx:else bind:tap="optionsCompany">{{key_obj.str}}</text>
          </block>
        </view>
      </block>
    </scroll-view>
</view>



<view style="margin-top: 70px;">第二种方案</view>
<view class="two-wrapper">
  <input class="two-input"
         placeholder="请输入搜索内容"
         bind:input="twoInput"></input>
    <scroll-view scroll-y>
      <block wx:for="{{twoSearchList}}"
             wx:key="index">
        <view class="two-view">
          <rich-text nodes="{{item.nameStr}}"></rich-text>
        </view>
      </block>
    </scroll-view>
</view>

wxss文件

.one-input,
.two-input{
  width: 100vw;
  height: 80rpx;
  padding-left: 10px;
  background: rgb(237, 137, 92);
}

.one-wrapper scroll-view,
.two-wrapper scroll-view{
  width: 100vw;
  height: 200px;
  background: rgb(243, 242, 241); 
}

.one-view,
.two-view{
  font-size: 16px;
  padding-left: 10px;
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 1px solid #eee;
}

.action{
  color: #40D8E8;
}

js文件

// pages/05-关键词高亮/05-关键词高亮.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 搜索列表数据
    searchList: [{
      name: 'CSS'
    }, {
      name: 'HTML'
    }, {
      name: 'javaScript'
    }, {
      name: 'Angular'
    }, {
      name: 'Vue'
    }, {
      name: 'React'
    }, {
      name: 'ReactNative'
    }, {
      name: 'canvas'
    }, {
      name: 'C++'
    }, {
      name: 'Java'
    }, {
      name: 'Python'
    }, {
      name: 'PHP'
    }, {
      name: 'go'
    }],
    // 第一个搜索列表数据
    oneSearchList: [],
    // 第二个搜索列表数据
    twoSearchList: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 监听第一个输入框的改变
   */
  oneInput(e) {
    // 输入框内容
    let val = e.detail.value;
    if(val.replace(/(^s*)|(s*$)/g, "").length == 0){
      this.setData({
        oneSearchList: []
      })
      return
    }

    // 搜索总列表
    let searchList = this.data.searchList;
    let oneSearchList = [];
    for (let i = 0; i < searchList.length; i++) {
      var current_word = searchList[i].name;
      if (current_word.indexOf(val) > -1) {
        oneSearchList.push(this.hilight_word(val, current_word))
      }
    }
    this.setData({
      oneSearchList
    })
  },

  hilight_word(key, word) {
    let idx = word.indexOf(key);
    let t = [];
    if (idx > -1) {
      if (idx == 0) {
        t = this.hilight_word(key, word.substr(key.length));
        t.unshift({
          key: true,
          str: key
        });
        return t;
      }
      if (idx > 0) {
        t = this.hilight_word(key, word.substr(idx));
        t.unshift({
          key: false,
          str: word.substring(0, idx)
        });
        return t;
      }
    }
    return [{
      key: false,
      str: word
    }];
  },

  /**
   * 监听第二个输入框的改变
   */
  twoInput(e) {
    // 输入框内容
    let val = e.detail.value;
    if(val.replace(/(^s*)|(s*$)/g, "").length == 0){
      this.setData({
        twoSearchList: []
      })
      return
    }

    // 搜索总列表
    let searchList = this.data.searchList;
    let twoSearchList = [];
    searchList.forEach(item => {
      if (item.name.indexOf(val) > -1) {
        var reg = new RegExp("(" + val + ")", "g");
        var htmlStr = item.name.replace(reg, "<font style='color: #40D8E8'>$1</font>");
        item.nameStr = htmlStr
        twoSearchList.push(item);
      }
    })

    this.setData({
      twoSearchList
    })
  }
})

欢迎大家提出更好的方案