前端模糊搜索实现与深拷贝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;

    }

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

推荐阅读更多精彩内容