Vue+ElementUI实现input框模糊查询提醒

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

<el-form-item>
<el-autocomplete
      class="inline-input"
      v-model="tableData.name"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容">
</el-autocomplete>
</el-form-item>

data中的数据定义：

data:{
		tableData:{
				   name:'',
		},
		nameTipsArray:[],//用于存放下拉提醒框中数据的数组
		nameArray:['name1','name2','name3']//页面初始化时全部数据
}

然后对v-model绑定的tableData.name进行watch监听：

watch:{
 	'table.name':{
    handler: function() {
      this.nameTipsArray = [];//这是定义好的用于存放下拉提醒框中数据的数组
        var len = this.nameArray.length;//nameArray是页面初始化时全部数据
        var arr = [];
        for (var i = 0; i < len; i++) {//根据输入框中inputName的值进行模糊匹配
          if (this.nameArray[i].indexOf(this.inputName) >= 0) {
            arr.push(this.nameArray[i]);//符合条件的值都放入arr中
          }
        }
        console.log(arr);
        
        //el-autocomplete元素要求数组内是对象，且有value属性，此处做一个格式调整
        for (var i = 0; i < arr.length; i++) {
          var obj = { value: "" };
          obj.value = arr[i];
          this.nameTipsArray.push(obj);
        }
    }
  }
}

然后querySearch：

methods:{
		querySearch(queruString, cb){
				var nameTipsArray = this.nameTipsArray;
				cb(nameTipsArray);
		}
}

注意：有待优化，输入第二个字符串时才开始执行匹配查询，
此程序在页面初始时已将全部数据先转换赋值到this.nameTipsArray一次