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

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

<input v-model="issue_content" v-on:input ="inputFunc" type="text" placeholder="如何修改密码">

<div class="serch_result" v-show="serch_result_issue">
        <li v-for="item in searchData">
        {{ item.name }}
        </li>
    </div>
    
数据结构

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模糊查询

<el-autocomplete class="inline-input" value-key='name' v-model="input" :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false" @select="handleSelect"></el-autocomplete>

data:{
    return{
        input:''
    }
},
methods:{
    async querySearch(queryString, cb) {
      var chId = '';
      var user = {
        mer_id:'',
        ch_id:chId
      }
      //这里是从后台获取数据
      await get*(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);
    }
}