Jong丨列表模糊搜索功能

实现功能

用户在搜索栏输入搜索的内容，将列表中匹配的内容展示在列表中，同时对应的字段进行高亮处理

设计思路

先将原有的数据存储起来，用户在搜索栏输入内容后，将listData清空，遍历原先数组，匹配数组中与搜索文字相同的字段，将其匹配文字进行替换，实现高亮。若搜索栏输入为空时，则显示原有的数据。

search = "";         // 搜索框输入的值
listData = [];       // 列表数据
oldListData = [];    // 列表原数据

this.oldListData  = DeepClone( this.listData );

// 监听搜索框是否输入
enterSearch( val ){
    let regExp = new RegExp( val );
    this.listData = [];
    if( this.search.length ){
        this.oldListData.forEach( item => {
            if( item['label'].indexOf( this.search ) > -1 ){
                let obj = {
                    name: item.label,
                    value: item.value,
                    showLabel:item.label
                }
                obj.showLabel=obj.showLabel.replace( regExp, `<span class="font_blue">${val}</sapn>`)
                this.listData.push( obj );
            }
        })
    }
    else{
        this.listData = this.oldListData;
    }
}