ELementUI 输入框 带输入建议 使用笔记

• 代码+注释

<el-row class="demo-autocomplete">
  <el-col :span="12">
    <div class="sub-title">激活即列出输入建议</div>
    <el-autocomplete
      class="inline-input"
      v-model="state1" // 双向绑定数据
      :fetch-suggestions="querySearch" // 筛选出 建议中关键字
      placeholder="请输入内容"
      @select="handleSelect"  //处理选择 建议 的值
    ></el-autocomplete>
  </el-col>
  <el-col :span="12">
    <div class="sub-title">输入后匹配输入建议</div>
    <el-autocomplete
      class="inline-input"
      v-model="state2" // 双向绑定数据
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      :trigger-on-focus="false"
      @select="handleSelect"
    ></el-autocomplete>
  </el-col>
</el-row>
<script>
  export default {
    data() {
      return {
        restaurants: [],
        state1: '',// 双向绑定
        state2: '' // 双向绑定
      };
    },
    methods: {
      querySearch(queryString, cb) {
        console.log(queryString);// 返回 建议列表
          
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
          
        // 调用 callback 返回建议列表的数据
        cb(results); // 返回数据 { "value":"输入建议" }

      },
      createFilter(queryString) { // 输入关键词 匹配
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll() { // 建议内容
        return [
          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },

        ];
      },
      handleSelect(item) {
        console.log(item);
      }
    },
    mounted() { // 生命周期 载入后
      this.restaurants = this.loadAll(); // 将上述函数值 赋值
     // this.restaurants = 处理后格式为 [{ "value":"输入建议" }]
    }
  }
</script>