先是用了ElementUI中給的el-autocomplete例子：

<el-autocomplete
      class="inline-input"
      v-model="inputName"
      :fetch-suggestions="querySearch"
      placeholder="請輸入內容"
></el-autocomplete>

querySearch是這樣定義的：

querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 呼叫 callback 返回建議列表的資料
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
 

這樣實現出來的效果是，只能按照輸入字元的順序查詢出結果，比如列表中有“喜茶、貢茶、茶多多”，在輸入框中輸入“茶”，只能提醒出“茶多多”，而沒有其餘兩個，於是做了一下修改。

輸入框的定義不變：

<el-autocomplete style="width:100%" class="inline-input" v-model="inputName" :fetch-suggestions="querySearch" placeholder="請輸入檔名"></el-autocomplete>

然後對繫結的inputName進行watch監聽：

watch:{
  inputName:{
    handler: function() {
      this.csvS = [];//這是定義好的用於存放下拉提醒框中資料的陣列
        var len = this.csvList.length;//csvList是頁面初始化時得到的初始全部資料
        var arr = [];
        for (var i = 0; i < len; i++) {//根據輸入框中inputName的值進行模糊匹配
          if (this.csvList[i].indexOf(this.inputName) >= 0) {
            arr.push(this.csvList[i]);//符合條件的值都放入arr中
          }
        }
        console.log(arr);
        
        //el-autocomplete元素要求陣列內是物件，且有value屬性，此處做一個格式調整
        for (var i = 0; i < arr.length; i++) {
          var obj = { value: "" };
          obj.value = arr[i];
          this.csvS.push(obj);
        }
    }
  }
}
 

然後querySearch變成這樣：

querySearch(queryString, cb) {
      var csvS = this.csvS;
      cb(csvS);
}

在頁面初始獲得全部資料之後，先轉換格式賦給this.csvS一次，之後根據inputName值的變化實時改變this.csvS的值，即改變了下拉提醒框中的內容。