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 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);
    }
}