模糊搜索"/>
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;
这样的话果然就可以显示出输入建议了。效果如下
更多推荐
elementUI中autocomplete实现模糊搜索
发布评论