Element 带输入建议的input框

  <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>

<script>
  export default {
    data() {
      return {
        restaurants: [],
        state1: '',
      };
    },
    methods: {
      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);
        };
      },
      loadAll() {
        return [
         
        ];
      },
      handleSelect(item) {
        console.log(item);
      }
    },
    mounted() {
      this.restaurants = this.loadAll();
    }
  }
</script>

<template>
  <el-autocomplete
    class="search-input"
    v-model="headSearch"
    :fetch-suggestions="querySearch"
    placeholder="请输入内容"
    clearable
    @select="handleSelect"
  >
    <template slot-scope="{ item }">
      <div class="name">{{ item.menuName }}</div>
      <!-- <div class="name">{{ item.value }}</div> -->
    </template>
  </el-autocomplete>
</template>

<script>
export default {
  props: { navMenus: Array },
  data() {
    return {
      headMenus: [],
      headSearch: ""
    };
  },
  created() {   
    let tepArr = [];
    this.sortData(this.navMenus, tepArr);
    //console.log(tepArr);
    this.headMenus = tepArr
  },
  mounted() {
    
  },
  methods: {
    querySearch(queryString, cb) {
      var headMenus = this.headMenus;
      var results = queryString
        ? headMenus.filter(this.createFilter(queryString))
        : headMenus;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return menu => {
        return menu.menuName.toLowerCase().match(queryString.toLowerCase());
      };
    },
    handleSelect(item) {
      console.log(item);
      //this.headSearch = item.menuName;
      this.$router.push(item.path);
      this.$store.commit("saveCurrentMenuName", item.label);
      this.$store.commit("addTab", item);
    },
    sortData(dataArr, tepArr) {
      //debugger
      for (let i = 0; i < dataArr.length; i++) {
        if (!dataArr[i].childMenu || dataArr[i].childMenu.length == 0) {
          let obj = {};
          for (let key in dataArr[i]) {
            obj[key] = dataArr[i][key];
          }
          tepArr.push(obj);
        } else {
          this.sortData(dataArr[i].childMenu, tepArr);
        }
      }
    }
  }
};
</script>

<style scoped>
.search-input {
  width: 200px;
  margin-right: 20px;
}
</style>