原生小程序实现搜索关键字高亮

原创链接：https://github.com/pdd11997110103/wxComponentWarehouse

先放wxml和wxss页：手写了一个搜索框

<view class="searchAll">
    <view class="searchTop">
        <input type="text" placeholder="搜索医生姓名" bindinput="searchValue" class="search" value="{{value}}" />
        <image class="searchImg" src="{{imgUrl}}ic_35@2x.png"></image>
        <image class="closeImg" src="{{imgUrl}}ic_41@2x.png" wx:if="{{ifValue == true}}" bindtap="clearValue"></image>
        <view class="concel" bindtap="goBack">取消</view>
    </view>
    <view wx:if="{{show}}" class="list_li" wx:for="{{filterList}}" wx:key="index" data-index="{{index}}"
        bindtap="pitchOn">
        <highlight text="{{item.nickname}}" key="{{value}}" />
    </view>
    <view class="searchNo" wx:if="{{show == false}}">
        <image src="{{imgUrl}}ic_36@2x.png" style="width: 320rpx;height: 320rpx;" mode=""></image>
        <view class="noTit">
            没有找到该医生
        </view>
    </view>
</view>

.searchTop {
	padding: 16rpx 32rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	place-items: center;
	position: relative;
}

.searchNo {
	margin-top: 236rpx;
	display: flex;
	flex-direction: column;
	place-content: center;
	place-items: center;
}

.noTit {
	margin-top: 32rpx;
	font-size: 28rpx;
	font-family: PingFang SC, PingFang SC-Regular;
	font-weight: 400;
	text-align: CENTER;
	color: #7d8f99;
}

.search {
	width: 600rpx;
	height: 72rpx;
	background: #F2F9FC;
	border-radius: 36rpx;
	padding: 16rpx 64rpx;
	box-sizing: border-box;
	text-align: left;
	font-size: 28rpx;
	font-family: PingFang SC, PingFang SC-Regular;
	font-weight: 400;
	color: #1c3341;
}

.list_li {
	height: 80rpx;
	font-size: 28rpx;
	line-height: 80rpx;
	padding: 0 32rpx;
	box-sizing: border-box;
	/* border-bottom: 2rpx solid #F1F1F1; */
}

.concel {
	font-size: 32rpx;
	font-family: PingFang SC, PingFang SC-Regular;
	font-weight: 400;
	color: #1c3341;
}
.searchImg{
	position: absolute;
	left: 56rpx;
	top: 36rpx;
	width: 32rpx;
	height: 32rpx;
}
.closeImg{
	position: absolute;
	right: 130rpx;
	top: 36rpx;
	width: 32rpx;
	height: 32rpx;
}

然后是js页：

 data: {
        imgUrl: app.globalData.imgurl,
        show: true,
        filterList: [], //过滤后的
        value: "",
        ifValue:false
 },
 // 搜索
    searchValue(e) {
        let that = this
        let val = e.detail.value;
        that.setData({
            value: val
        })
        if (val.length > 0) {
            that.setData({
                filterList: [],
                ifValue : true
            })
            let params = {
                page: 1,
                keyword: that.data.value,
                order: "",
                level_ids: "",
                dept_ids: ""
            }
            api.postRequest('index/doctorList', params, res => {
                let arr = [];
                if (res.code == 1) {
                    if (res.data.data.length > 0) {
                        that.setData({
                            filterList: res.data.data,
                            show : true
                        })
                    } else {
                        that.setData({
                            show: false
                        })
                    }
                }
            })
        } else {
            that.setData({
                filterList: [],
                ifValue : false
            })
        }
    },
    // 清空输入框
    clearValue(){
        this.setData({
            value : ''
        })
    },
    // 返回
    goBack(){
        wx.navigateBack({
          delta: 0,
        })
    }

然后在json中引入组件：

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

组件的wxml和wxss：

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

组件的js：

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

data: {
		highlightList: [], //处理后的数据
},

methods: {
		// 非空过滤
		_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
			})
		}
}