Vue前端模糊搜索 js 封装及用法

本文链接： https://blog.csdn.net/QQ_Empire/article/details/98182723
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
  	<el-input v-model="keyWorld" placeholder="请输入内容" @input="searchKeyFun"><i class="el-icon-view el-icon--right"></i></el-input>
    <ul>
    	<li v-for="(item,i) in list" :key="i" style="display: flex;">
    		<p>名称：{{item.name}}</p>&nbsp;&nbsp;
    		<p>年龄：{{item.age}}</p>&nbsp;&nbsp;
    		<p>性别：{{item.sex}}</p>&nbsp;&nbsp;
    		<p>地址：{{item.address}}</p>
    	</li>
    </ul>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { 
        	keyWorld: '',
        	//展示的数据
            list:[
               {name:"李四",age:"21",sex:"男",address:"北京市东城区"},
               {name:"张三",age:"33",sex:"男",address:"上海市徐汇区"},
               {name:"周轩",age:"55",sex:"女",address:"天京市滨海区"},
               {name:"刘备",age:"66",sex:"男",address:"郑州市二七区"},
               {name:"王丽",age:"22",sex:"女",address:"苏州市姑苏区"},
               {name:"嬴政",age:"55",sex:"男",address:"杭州市余杭区"},
            ],
            //不变的元数据
            searchList:[
               {name:"李四",age:"21",sex:"男",address:"北京市东城区"},
               {name:"张三",age:"33",sex:"男",address:"上海市徐汇区"},
               {name:"周轩",age:"55",sex:"女",address:"天京市滨海区"},
               {name:"刘备",age:"66",sex:"男",address:"郑州市二七区"},
               {name:"王丽",age:"22",sex:"女",address:"苏州市姑苏区"},
               {name:"嬴政",age:"55",sex:"男",address:"杭州市余杭区"},
            ]
        }
      },
      methods:{
      	//使用方法。注意：（searchList为元数据，list为搜索过滤后的数据）
      	 searchKeyFun(){
             this.list = this.searchFun(this.searchList,this.keyWorld);
      	 },
      	 
      	 //筛选封装（注意：要更改为自己的模糊搜索的字段）
      	 searchFun(arr,keyword){
      	 	if(keyword ==''||keyword==null){
                return arr;
            };
            let newList = arr.filter(item=>
            	(item.name.indexOf(keyword)>=0)||
            	(item.age.indexOf(keyword)>=0)||
            	(item.sex.indexOf(keyword)>=0)||
            	(item.address.indexOf(keyword)>=0)
            );
            return newList;
      	 }
      }
    })
  </script>
</html>
Vue前端模糊搜索 js 封装及用法

猜你喜欢
