Vue前端页面关键词快速搜索方法

1、要达到的效果

• 通过在搜索框里输入关键词，搜索到相对应title的订单，如下。

2、html:

<el-input
    style="width: 350px;height:30px;padding-bottom:6px;"
    @input="searchFun"
    placeholder="快速搜索拼单"
    prefix-icon="el-icon-search"
    v-model="searchVal">
</el-input>

3、script

export default {
  data () {
    return {
      List: [],
      token:'',
      searchVal:'', 
      searchList:''
    }
  },
  methods: {
      searchFun(){
        if(this.searchVal===''){   //如果搜索栏为空就执行getList方法获取最初始的列表
        	this.getList();
        }else{
			//搜索
        	let list=this.List.filter(item=>item.title.toString().indexOf(this.searchVal)>=0);
            this.List=list;
        }
      },
    //页面加载时获取订单  
    getList() {
     this.$axios({
        method: 'get',
        url: '/demo/job-order/',
        headers: {
            'Content-Type': "application/json;charset=UTF-8",
            'Authorization': 'Bearer ' + this.token,
        }
      })
      .then(res=>{                    //请求成功后执行函数
        if(res.data.code === 0){
          //定义从后端获取的list
          var res = res.data.data
          this.List = res 
          console.log("获取拼单成功")
        }else{
          console.log("获取拼单失败")
        }
      })
      .catch(err=>{                   //请求错误后执行函
        console.log("请求错误")
      })
    }
  },
  created(){
  	this.token =  localStorage.getItem('token')
  },
  mounted: function () {
  	this.getList();
  },
}

4、核心代码

searchFun(){
        if(this.searchVal===''){   //如果搜索栏为空就执行getList方法获取最初始的列表
        	this.getList();
        }else{
			//搜索
        	let list=this.List.filter(item=>item.title.toString().indexOf(this.searchVal)>=0);
            this.List=list;
        }
      },

其实最核心的应该是let list=this.List.filter(item=>item.title.toString().indexOf(this.searchVal)>=0);这行，表示获取serachVal的值并转化为字符串再去遍历list数组。