elementUI中autocomplete实现模糊搜索

模糊搜索"/>

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-autocompleteclass="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;

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