elementUI中autocomplete实现模糊搜索

一.实现传递参数的格式是Formdata格式
在请求时设置headers:
headers:{“Content-type”:“application/x-www-form-urlencoded”}
二.模糊查询
1.input输入框，模糊查询

```javascript
<template>

 <div>

  <input type="text" placeholder="请输入..." v-model="searchVal">

  <ul>

   <li v-for="(item,index) in NewItems" :key="index" :value="item.value" v-text="item.name"></li>

  </ul>

 </div>

</template>

<script>

export default {

 name: "HelloWorld",

 data() {

  return {

   searchVal: "",

   items: [

    {

     name: "上海",

     value: "sh"

    },

    {

     name: "北京",

     value: "bj"

    },

    {

     name: "重庆",

     value: "cq"

    },

    {

     name: "嗨嗨嗨嘎嘎嘎",

     value: "hhh"

    },

    {

     name: "海上",

     value: "hs"

    },

    {

     name: "京都",

     value: "jd"

    }

   ]

  };

 },

 methods: {},

 computed: {

  NewItems() {

   var _this = this;

   var NewItems = [];

   this.items.map(function(item) {

    if (item.name.search(_this.searchVal) != -1) {

     NewItems.push(item);

    }

   });

   return NewItems;

  }

 }

};

</script>

2.Vue+element 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官方文档中的代码是这样的：
按照这样的写法，筛选的数据只是首字匹配的列表项，而我们的需求是需要包含输入字的所有列表项，并不是只匹配首字建议，所以需要将他的方法改成下面这样，只需要筛选到字符串而不是匹配第一次出现的位置。

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

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

也就是里面是有一个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;

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