elementui input输入框实现模糊查询(中间踩了两个坑)

实现这个功能，在网上找了很多感觉都不太准确，残缺不全，这里做个总结

完整代码

<el-autocompletev-model="state":fetch-suggestions="querySearchAsync"placeholder="请输入内容"@select="handleSelect"></el-autocomplete>

<script>export default {data() {return {restaurants: [],//后端获取的数据 state: '', //输入框输入的双向绑定的数据}}mounted() {this.loadAll()},methods: {//获取后端数据的接口loadAll() {let that = thisthat.$axios.get(that.baseURL+'PROD/testdialog/documents/').then(function(res){if (res.data.code===1){that.restaurants = res.data.data// console.log(res.data.data)}else{// 失败的提示that.$message.error(res.data.msg)}}).catch(function(err){console.log(err)})},querySearchAsync(queryString, cb) {var restaurants = this.restaurants;var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;cb(results);},createStateFilter(queryString) {return (state) => {return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);};},handleSelect(item) {console.log(item);},}</script>

这里要强调两点：

(1)

createStateFilter(queryString) {return (state) => {return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);};},return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1); //这里大于-1可以实现模糊查询，比如你输入 git 那么git getgit gitout都可以查询到//如果你这里是 return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) ===0);//当你输入 git 那么只能显示git gitout 而getgit查询不到 只能以要搜寻的条件为开头

(2)

createStateFilter(queryString) {return (state) => {return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);};//这里的value要和你后端返回的key对应，也就是说你后端返回的数据的key要是value，不要随便改一个，前端会拿不到数据，至于为什么我也不清楚，反正可以实现