前端模糊搜索实现与深拷贝cloneDeep

对获取到的原始数组数据进行深拷贝，以免改变原始数组结构；通过输入值匹配数组对象值来重组匹配出来的数组。

1.安装lodash： npm install lodash --save

2.组件中使用：

import _ from 'lodash'

<input v-model="name"  @input="searchInfo" />

<ul>

    <li v-for="(item,index) in searchList"  :key="index">

        {{item.name}}

    </li>

</ul>

data() {

    return {

        name: '',

        dataList:[{name:'张三',sex:'男'}，{name:'李四',sex:'男'}],

        searchList:[],

    }

},

searchInfo: _.debounce(function() {

        this.search();

 }, 200),

search(){

    if(this.name){

        let dataList = _.cloneDeep(this.dataList);

        let inputName = this.name.toLowerCase(); //转小写搜索更精确

        let newList = []; //  用于存放搜索出来数据的新数组

        dataList .filter(item => {

            if (item.name.toLowerCase().indexOf(inputName) !== -1) {

                newList.push(item);

             }

        }) 

        this.searchList = newList;

    }

}