elementUI 之 Input 输入框，带输入建议

下面代码段来自官方文档，只是添加了注释！

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<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>
</div>

var Main = {
    data() {
      return {
        //①
        restaurants: [],
        state1: '',
        state2: ''
      };
    },
    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 [
          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
        ];
      },
      handleSelect(item) {
        console.log(item);
      }
    },
    mounted() {
      this.restaurants = this.loadAll();
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

解释如下：
①处的变量restaurants
1、其数据类型是对象数组。在真正项目中，其值应该是从后端查询得到的，该示例为方便演示使用了硬编码。
2、对其第一个值：{ “value”: “三全鲜食（北新泾店）”, “address”: “长宁区新渔路144号” }，address属性未使用，你可以忽略它。变量value你以随意修改，只要与这处的代码保持一致即可：return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);

②处的函数querySearch(queryString, cb)
1、queryString代表用户输入的查询字符串，例如输入“三全”，会出现“三全鲜食（北新泾店）”，此时queryString的值等于“三全”。
2、我们没有指定cb的值，但经调试后发现，它并不是undefined，而是如下所示，不太理解：）

function(e) {
  t.loading = !1,
  t.suggestionDisabled || (Array.isArray(e) ? (t.suggestions = e, t.highlightedIndex = t.highlightFirstItem ? 0 : -1) : console.error('[Element Error][Autocomplete]autocomplete suggestions must be an array'))
}

③处
1、如果用户输入了查询字符串，则对候选值集合进行过滤，过滤条件是：

• 忽略大小写
• 以输入的查询字符串开头

2、如果想改为只要包括了查询字符串就显示，可以将上文中的 === 0改为 !== -1