小程序实时搜索-不区分大小写

其他没必要的代码 就没必要展示了

    if (value != '') { //实时搜索
      console.log('value值' + value);
      console.log(time);
      if (time) {
        clearInterval(time);
      }
      time = setTimeout(() => {  //防抖
        wx.request({
          url: ‘******************',
          data: {
            '**': '**'
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          },
          method: "POST",
          success: (res) => {
            console.log(res);
            if (res.data.isSuccess) {
              if (res.data.resultData.length > 0) {
                var arr = [];
                console.log(value)
                for (let i = 0; i < res.data.resultData.length; i++) {
                  arr.push(this.heightLight(res.data.resultData[i].activityName, value))
                }

                console.log(arr)
                this.setData({
                  resultArr: res.data.resultData,
                  resultArr_replace: arr,
                  bool: false,
                  souSuoBool: false
                })
              } else {
                console.log('实时无结果不提示')
                this.setData({
                  resultArr: [],
                  resultArr_replace: [],
                  bool: true,
                  souSuoBool: true
                })
              }
            } else {
              this.setData({  // 去掉搜索为空时的代替图
                souSuoBool: false
              })
              console.log('实时调接口失败不提示')
            }
          },
          fail: () => {
            this.setData({  // 去掉搜索为空时的代替图
              souSuoBool: false
            })
            console.log('实时网络异常不提示')
          }
        })
      }, 300)
    } else {
      this.setData({     // 去掉搜索为空时的代替图
        souSuoBool: false
      })
    }
	
  heightLight: function (s, v) {
    var reg = new RegExp(v, "gi");
    s= s.replace(reg, function (r) {
      return "<p  class='p_color'>" + r + "</p>";
    })
    return s;
  },

html:

由于用到替换成p标签，采用富文本

<view class="view_box">
	<view class="view_boxs" bindtap="skip" wx:for="{{resultArr_replace}}" data-result_i="{{index}}">
		<rich-text nodes="{{item}}"></rich-text>
	</view>
</view>

css:

css重点就一个p_color

.view_boxs .p_color {
  color: #11AEFF;
  display: inline;
}

另外最后在说一下，小程序的开发其实挺’简单‘，现成的api，不过时常的api更新记得关注腾讯社区就行，嘿嘿