vue 实现模糊搜索功能，vue-element ui改编input模糊查询

vue实现模糊搜索功能
根据输入的内容进行查找数据，然后展示含有输入内容的数据

 

 

        

        {{ item.name }}
        
    
    
数据结构
 
data () {
    return {
      issue_content:"",//输入框中的内容
      serch_result_issue:false,//控制搜索的问题显示隐藏
      serch_result:[
        {name:"忘记了密码怎么办?"},
        {name:"如何成为星签约者"},
        {name:"什么样的文章能够被星官方推荐"},
        {name:"我在哪里可以找到自己发布的文章"},
        {name:"忘记了密码怎么办"}
      ]
    }
  },
methods:{
    //监听输入事件，当input中有内容时，下面的搜索列表显示出来
    inputFunc(){
      if(this.issue_content.length>0){
        this.serch_result_issue = true;
      }else{
        this.serch_result_issue = false
      }
    }
  },
//计算属性，当输入内容的时候下面的方法就会根据你输入的内容来过滤serch_result数组中的数据
  computed: {
    searchData() {
      var issue_content = this.issue_content;
      if (issue_content) {
        return this.serch_result.filter(function(product) {
          return Object.keys(product).some(function(key) {
            return String(product[key]).toLowerCase().indexOf(issue_content) > -1
          })
        })
      }
      return this.products;
    }
  }

vue-element ui改编input模糊查询

 
data:{
    return{
        input:''
    }
},
methods:{
    async querySearch(queryString, cb) {
      var chId = '';
      var user = {
        mer_id:'',
        ch_id:chId
      }
      //这里是从后台获取数据
      await getMohu(queryString,user).then(res=>{
        // this.restaurants = res
        this.restaurants = [
          {
            name:'粤A05965D'
          },
          {
            name:'粤A02637D'
          },
          {
            name:'粤A02891D'
          }
        ]
        var restaurants = this.restaurants;
        var results = queryString
          ? this.searchData(queryString)
          : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      })
    },
    searchData(issue_content) {
        return this.restaurants.filter(function(product) {
          return Object.keys(product).some(function(key) {
            return String(product[key]).toUpperCase().indexOf(issue_content) > -1
          })
        })
      return this.products;
    },
    handleSelect(item) {
      console.log(item);
    }
}

 转自：https://blog.csdn.net/wodebokecsdn/article/details/83539861