Element UI的input输入框进行搜索的时候(根据输入内容提供对应的输入建议)有个坑,它只能用第一个字进行搜索,不能够实现模糊匹配,下面的方法就是填这个坑。
原来搜“奖”,后台给返回数据,但是不会出现下拉框。
例如:
只要搜“抽”才出现下拉框
解决后实现效果:
代码如下:
<el-row class="demo-autocomplete"><el-col :span="12"><el-autocompleteclass="inline-input"v-model="name":fetch-suggestions="querySearch"placeholder="请输入内容":trigger-on-focus="false"@select="handleSelect"@input="changeData"></el-autocomplete></el-col></el-row>
<script>export default {data() {return {name:"",//藏品名称restaurants: [],}},methods: {querySearch(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);};},//@select 点击选中建议项时触发handleSelect(item) {this.name=item.valuethis.select=item.valuethis.getnumber()},//@input 在 Input 值改变时触发changeData(value){if(value!=''){this.handleChange()}else {this.image = ''this.select=""}},// 接口async handleChange() {let param={type:"collection",name:this.name};await this.$api.operateMgmt.synthesisWorks(param).then((res) => {if (res.code == 200) {this.restaurants=res.data.map(item=>{return{value:item.title}})this.image=res.data[0].imagethis.worksId=res.data[0].id} else {this.$message({message: res.message,type: "error",duration: mon.duration,});}});},}</script>
重点:
createStateFilter(queryString) {return (state) => {return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);};},//这里大于-1可以实现模糊查询,如果你要搜“奖”,就会搜到含“奖”的所有字
如果使用Element UI里面的
createFilter(queryString) {return (restaurant) => {return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);};},//这里等于0只能搜“奖”开头的字