elementUI中带输入建议的input使用

项目中有一个需求是在输入框输入文字的时候带出有相应内容的提示建议，第一个想法是自己写一个定位元素控制显示隐藏，然后前端进行筛选，仔细思考之后发现有很多问题，比如前端数据需要把数据全部请求过来，但是数据非常多的时候这个方法就不适用，并且还要自己去写模糊查询，下拉框的动画等也需要自己去写，所以我就放弃了自己造*的想法，改用elementUI中的组件。

autocomplete 是一个可带输入建议的输入框组件，可以直接使用。

<el-autocomplete
          class="el-input"
          v-model="houseNumber"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入房间号"
          :trigger-on-focus="false"
          @focus="getHouse">
</el-autocomplete>

它分为两种，一种是**就列出输入建议，一种是输入后匹配输入建议，目前需求是输入后再匹配，所以需要把trigger-on-focus的值设为false.

fetch-suggestions 是一个返回输入建议的方法属性，在该方法中你可以在输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中.

 querySearchAsync(queryString, cb) {
        let houseNumberList = this.houseNumberList;
        let results = queryString ? houseNumberList.filter(this.createStateFilter(queryString)) : houseNumberList;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 1000 * Math.random());
      },

其中的this.houseNumberList是我从服务器拿到的数据，其中的callback函数还需要返回一个数组，就是其中createStateFilter的返回值。这里面需要说明的一点是elementUI官方文档中的代码是这样的：

  

按照这样的写法，筛选的数据只是首字匹配的列表项，而我们的需求是需要包含输入字的所有列表项，并不是只匹配首字建议，所以需要将他的方法改成下面这样，只需要筛选到字符串而不是匹配第一次出现的位置。

createStateFilter(queryString) {
        return (houseNumber) => {
          return (houseNumber.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
        };
      },

这样的话本来是就可以在输入的时候出现输入建议了，但是我发现输入的时候无论是否匹配建议，输入建议列表都没有数据并且没有报错，仔细翻了官方文档，发现没有其他的属性需要设置了。那问题可能出在数据本身，结果看到官方文档给出的数组形式是这样的：

也就是里面是有一个value字段的对象的，而我的需要筛选的数据字段名并不是value,所以现在需要遍历数组把筛选字段换成value，

this.houseNumberList = [];
for(let i=0;i<res.data.hlHouse.length;i++){
   this.houseNumberList.push({'value':res.data.hlHouse[i].houseNumber})
}
return this.houseNumberList;

这样的话果然就可以显示出输入建议了。效果如下：