vue实现模糊搜索

在vue中，模糊搜索主要是用computed属性实现.

方法一：filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素,不会改变原数组。

 

 具体代码实现如下：

<div calss="nav-box">    
    <el-input class="nav-inp" prefix-icon="el-icon-search" v-model="keyword" placeholder="请输入关键字"></el-input>
    <ul>
        <li v-for="(item,index) in searchResult" :key="index" @click="chooseClick(index) " :class="{active:index==isActive}" >{{item}}</li>
    </ul>
</div>

js部分

export default {
    data(){
        return {
            keyword:'',
            //从接口获取展示数据存入其中
            Chinese:[]
        }
    },
    computed:{
        searchResult(){
            if(this.keyword){
                return this.Chinese.filter((value)=>{
                    return value.includes(this.keyword);
                });
            }else{
                return this.Chinese;
            }
        }
    },

}

方法二：使用 new RegExp(val)

//监听搜索关键词的变化，变化时执行
watch: {
    //搜索的关键词
    searchValue: {
        handler(val) {
            //如果搜索关键词为空，返回所有数据
            if(val === '') {
                this.eventList = lodash.cloneDeep(this.tempList);
            }else {
                //返回包含关键词的数据
                this.eventList = this.tempList.filter(item => {
                    let reg = new RegExp(val);
                    return reg.test(item.serialNumber) || reg.test(item.responseTitle);
                });
            }
        }
    }
}